How to send cross domain POST requests through JavaScript?
Note - it should not refresh the page, after which I need to grab and parse the response.
#1 building
Advanced. ... you need to set up cname on the server so that other-serve.your-server.com points to other-server.com.
Your page dynamically creates an invisible iframe that acts as your transport to other-server.com. Then, you must communicate with other-server.com from your page through JS, and have a callback to return the data to your page.
Possible, but coordination between your-server.com and other-server.com is needed
#2 building
I know it's an old problem, but I want to share my approach. I use cURL as a proxy, which is very simple and consistent. Create a PHP page called Submit.php and add the following code:
<? function post($url, $data) { $header = array("User-Agent: " . $_SERVER["HTTP_USER_AGENT"], "Content-Type: application/x-www-form-urlencoded"); $curl = curl_init(); curl_setopt($curl, CURLOPT_URL, $url); curl_setopt($curl, CURLOPT_HTTPHEADER, $header); curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1); curl_setopt($curl, CURLOPT_POST, 1); curl_setopt($curl, CURLOPT_POSTFIELDS, $data); $response = curl_exec($curl); curl_close($curl); return $response; } $url = "your cross domain request here"; $data = $_SERVER["QUERY_STRING"]; echo(post($url, $data));
Then, in your js (jQuery in this case):
$.ajax({ type: 'POST', url: 'submit.php', crossDomain: true, data: '{"some":"json"}', dataType: 'json', success: function(responseData, textStatus, jqXHR) { var value = responseData.someKey; }, error: function (responseData, textStatus, errorThrown) { alert('POST failed.'); } });
#3 building
stay In http://taiyolab.com/mbtweet/scripts/twitter api_call.js Check the Post & method function - a good example of the iframe method above.
#4 building
If you want to do this in an ASP.net MVC environment with JQuery AJAX, follow these steps: (this is this Summary of solutions provided by threads)
Suppose "caller.com" (which can be any website) needs to be published to "server.com" (an ASP.net MVC application)
-
On the Web.config of the server.com application, add the following sections:
<httpProtocol> <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Content-Type" /> <add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" /> </customHeaders> </httpProtocol>
-
On server.com, we will do the following for the controller to publish to (called "Home"):
[HttpPost] public JsonResult Save() { //Handle the post data... return Json( new { IsSuccess = true }); }
-
Then publish the data (with html id "formId") from "caller.com" to "server.com", as follows:
$.ajax({ type: "POST", url: "http://www.server.com/home/save", dataType: 'json', crossDomain: true, data: $(formId).serialize(), success: function (jsonResult) { //do what ever with the reply }, error: function (jqXHR, textStatus) { //handle error } });
#5 building
Create two hidden iframes (add "display: none;" to the CSS style). Make the second iframe point to something in your own domain.
Create a hidden form, set its method to target = your first iframe for publishing, and optionally set enctype to multipart / form data
When you are ready, set the form Submit() to POST.
If you can have another domain return JavaScript that will communicate with iframe across domains( http://softwareas.com/cross-domain-communication-with-iframes ), and you're lucky to be able to capture responses as well
Of course, if you want to use the server as a proxy, you can avoid all of these situations. Simply submit the form to your own server, which proxies the request to another server (assuming that the other server is not set to notice the IP difference), gets the response and returns whatever you want.