问题
I am stuck with this CORS problem, even though I set the server (nginx/node.js) with the appropriate headers.
I can see in Chrome Network pane -> Response Headers:
Access-Control-Allow-Origin:http://localhost
which should do the trick.
Here's the code that I now use to test:
var xhr = new XMLHttpRequest();
xhr.onload = function() {
console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();
I get
XMLHttpRequest cannot load http://stackoverflow.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.
I suspect it's a problem in the client script and not server configuration...
回答1:
Chrome does not support localhost for CORS requests (a bug opened in 2010, marked WontFix in 2014).
To get around this you can use a domain like lvh.me
(which points at 127.0.0.1 just like localhost) or start chrome with the --disable-web-security
flag (assuming you're just testing).
回答2:
Per @Beau's answer, Chrome does not support localhost CORS requests, and there is unlikely any change in this direction.
I use the Allow-Control-Allow-Origin: * Chrome Extension to go around this issue. The extension will add the necessary HTTP Headers for CORS:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>
The source code is published on Github.
Note that the extension filter all URLs by default. This may break some websites (for example: Dropbox). I have changed it to filter only localhost URLs with the following URL filter
*://localhost:*/*
回答3:
The real problem is that if we set -Allow-
for all request (OPTIONS
& POST
), Chrome will cancel it.
The following code works for me with POST
to LocalHost with Chrome
<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
//header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
}
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
?>
回答4:
Chrome will make requests with CORS from a localhost
origin just fine. This isn't a problem with Chrome.
The reason you can't load http://stackoverflow.com
is that the Access-Control-Allow-Origin
headers weren't allowing your localhost
origin.
回答5:
Quick and dirty Chrome extension fix:
Moesif Orign & CORS Changer
However, Chrome does support cross-origin requests from localhost. Make sure to add a header for Access-Control-Allow-Origin
for localhost
.
回答6:
I was full on nightmare with the cors the other day so I switched my programming paradigm.
for my web app im developing, eventually im deploying to a production, in this case I'm using Heroku
. To work on server side stuff like http I use Postman
to test all the http routes, postman doesn't get blocked from cors.
After my unit tests are done and verified I deploy server to Heroku and then I work on the client. this way the client makes requests to the server which is elsewhere and does not receive cors.
来源:https://stackoverflow.com/questions/10883211/deadly-cors-when-http-localhost-is-the-origin