How to send cross domain POST requests through JavaScript?

Keywords: curl JSON PHP Javascript

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 points to

Your page dynamically creates an invisible iframe that acts as your transport to Then, you must communicate with from your page through JS, and have a callback to return the data to your page.

Possible, but coordination between and 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);
return $response;

$url = "your cross domain request here";
echo(post($url, $data));

Then, in your js (jQuery in this case):

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 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 MVC environment with JQuery AJAX, follow these steps: (this is this Summary of solutions provided by threads)

Suppose "" (which can be any website) needs to be published to "" (an MVC application)

  1. On the Web.config of the 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>
  2. On, 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 }); }
  3. Then publish the data (with html id "formId") from "" to "", as follows:

    $.ajax({ type: "POST", url: "", dataType: 'json', crossDomain: true, data: $(formId).serialize(), success: function (jsonResult) { //do what ever with the reply }, error: function (jqXHR, textStatus) { //handle error } });

#5 building

  1. Create two hidden iframes (add "display: none;" to the CSS style). Make the second iframe point to something in your own domain.

  2. Create a hidden form, set its method to target = your first iframe for publishing, and optionally set enctype to multipart / form data

  3. When you are ready, set the form Submit() to POST.

  4. If you can have another domain return JavaScript that will communicate with iframe across domains( ), 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.

Posted by ghurtado on Thu, 09 Jan 2020 05:13:05 -0800