Firefox 'Cross-Origin Request Blocked' despite headers
Turns out this has nothing to do with CORS- it was a problem with the security certificate. Misleading errors = 4 hours of headaches.
How to fix cross-origin request fail in Firefox
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 :)
Firefox CORS blocking access to site that is listed allowed
From the look of it, you are doing localhost
development over http
, and attempting to use cloudflare via an https
request (unless I read that wrong). All modern browsers will block this today, because they won't allow cross protocol requests (and I think they no longer allow unsecure requests as well). If you setup your local development environment to run under it's own self signed secure cert, then you can get your CORS calls working with local development.
Same-origin request causes “Access-Control-Allow-Origin doesn’t match” error, though origin of course matches. Note: has CSP policy w/ sandbox
Replacing sandbox
with sandbox allow-same-origin
in the CSP policy will fix the problem.
Explanation:
The CORS problem the question describes is ultimately caused by the browser having set the origin value to null
. So even though the Access-Control-Allow-Origin
response header is set to the origin value that’d normally be expected — matching the URL shown in the browser address bar — it actually doesn’t match, due to the fact the browser has set the origin to null
.
So you end up in what looks like a paradox: the document seeming to not match its own origin.
The answer at https://stackoverflow.com/a/42242802/441757 outlines all cases where browsers set an origin to null
. The specific cause of the case in the question arises from requirements at https://html.spec.whatwg.org/multipage/#attr-iframe-sandbox which say, if sandbox
is set:
content is treated as being from a unique origin, forms, scripts, and various potentially annoying APIs are disabled, links are prevented from targeting other browsing contexts, and plugins are secured. The
allow-same-origin
keyword causes the content to be treated as being from its real origin instead of forcing it into a unique origin.
So the bottom line is: Whenever you specify sandbox
, in most cases you want to be specifying it with the allow-same-origin
keyword included — in order to prevent surprising and hard-to-troubleshoot problems/side-effects such as the CORS problem described in the question.
No Access-Control-Allow-Origin with Firefox, but works with Chrome and Safari
I was facing exactly the same problem, and the bug seems to be fixed on the new fresh version of Firefox - 45.0.0. Try to update and check it again. I'm gonna explain the issue to the users and guide them to do the upgrade as well.
Related Topics
What Is a Practical Use for a Closure in JavaScript
Ignore Typescript Errors "Property Does Not Exist on Value of Type"
Is It Evil to Use Eval to Convert a String to a Function
Lodash - Difference Between .Extend()/.Assign() and .Merge()
Typescript Export VS. Default Export
Jquery .Load()/.Ajax() Not Executing JavaScript in Returned HTML After Appended
Destructuring a Default Export Object
How to Check If an Object Has a Key in JavaScript
Jquery .On() Method with Multiple Event Handlers to One Selector
Es6 Exporting/Importing in Index File
How to Disable JavaScript in Chrome Developer Tools
Differencebetween Typeof and Instanceof and When Should One Be Used VS. the Other
Getting the First Index of an Object
Clearrect Function Doesn't Clear the Canvas
Referenceerror: Fetch Is Not Defined
Triggering a JavaScript Click() Event at Specific Coordinates