I have a javascript file in which i want to send json data to a ERP system:

 var formData1 = JSON.stringify($('#msform').serializeObject());
    $.ajax({
        url:'http://102.101.101.11:80/c/orders',
        type:'POST',
        data:formData1,
        crossDomain: true,
        dataType: 'json',
        jsonpCallback: 'callback',
        success: function(data) {
            //window.location.href = ";;
            console.log(data);
        }
    });

This script works with chrome and IE, but FIREFOX gives me this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at the url. Reason: Cors-request failed.

How to fix this? See solution below!

I have a javascript file in which i want to send json data to a ERP system:

 var formData1 = JSON.stringify($('#msform').serializeObject());
    $.ajax({
        url:'http://102.101.101.11:80/c/orders',
        type:'POST',
        data:formData1,
        crossDomain: true,
        dataType: 'json',
        jsonpCallback: 'callback',
        success: function(data) {
            //window.location.href = "http://www.petlooza.";
            console.log(data);
        }
    });

This script works with chrome and IE, but FIREFOX gives me this error:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at the url. Reason: Cors-request failed.

How to fix this? See solution below!

• javascript
• json
• .htaccess
• firefox

• I can see that the protocol for ajax request is http. Can you please tell what is the protocol displayed on location bar on your browser? – amitguptageek Commented Oct 14, 2015 at 7:38
• i am sorry i dont know what you mean – Nuri Ensing Commented Oct 14, 2015 at 7:55
• I meant what is the protocol of the request and ajax request. Is there two different requests i.e https for original request to load page and http for ajax call. – amitguptageek Commented Oct 14, 2015 at 8:38
• no, the post is from an HTTP to HTTP. it happens from a webserver to a lotus notes agent which listens with a http url – Nuri Ensing Commented Oct 14, 2015 at 8:51
• 2 Please do not include the solution in the question, instead post it as an answer to your own question and mark it as the correct answer. This helps keep SO tidy. – James T Commented Oct 14, 2015 at 13:45

3 Answers 3

I fixed it by doing the following:

A. You need a .htaccess on the host where you run the script.

<FilesMatch "\.(php)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "POST, GET, OPTIONS"
Header set Access-Control-Max-Age "1000"
Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"

secondly the ERP system also need headers to be set. You can check with curl if headers are correctly set or not.

B. Another option: if you do not want to work with headers, or are unable to set some headers then you can use CURL to do the job :

when clicking submit on my form, my script will call a .php file in which i have this code:

<?php
//
//code to send json to lotus webservice without cors errors
//
$jsondata = $_GET['jsondata'];
$ch = curl_init();

curl_setopt($ch, CURLOPT_URL,"102.101.101.11:80/c/orders");
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS,$jsondata);

// in real life you should use something like:
// curl_setopt($ch, CURLOPT_POSTFIELDS,
//          http_build_query(array('postvar1' => 'value1')));

// receive server response ...
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);

$server_output = curl_exec ($ch);


curl_close ($ch);



?>

and it works! no more cors errors! and data send to the server and also received by server :)

I'd suggest checking out the following resources:

Firefox CORS request giving 'Cross-Origin Request Blocked' despite headers which is a StackOverflow question from a bit ago.

https://developer.mozilla/en-US/docs/Web/Security/Same-origin_policy Might help you debug your issue, it demonstrates how Mozilla has implemented their own security policy on CORS.

https://developer.mozilla/en-US/docs/Web/HTTP/Access_control_CORS is a mroe in depth server side document about Mozilla's CORS implementation.

It could be you're requesting it via a different protocol or host, which we can't tell from your examples here, but are mon failure modes.

If you have control of the code on the other side, you can use JSONP instead to get the data, and can avoid all the issues with CORS.

Update: I blogged about JSONP the other day: http://blog.texasswede./calling-a-notes-web-agent-from-another-server-using-jsonp/