Javascript CORS 不适用于 Chrome
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3136140/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CORS not working on Chrome
提问by Malvolio
I've set up Cross-Origin Resource Sharing on a server (Jetty using the CrossOriginFilter) and it works perfectly on IE8 and Firefox. On Chrome, it just ... doesn't.
我已经在服务器（Jetty 使用 CrossOriginFilter）上设置了跨源资源共享，它在 IE8 和 Firefox 上完美运行。在 Chrome 上，它只是......没有。
$.ajax({ url : crossOriginURL,
type : "GET",
error : function(req, message) {
alert(message);
},
dataType : "json" } );
The error function is invoked, with the helpful message "error". It seems to be making the request, but without any of the headers you'd expect. If the URL is from the same origin, it works fine.
错误函数被调用，并带有有用的消息“错误”。它似乎正在发出请求，但没有您期望的任何标头。如果 URL 来自同一来源，则它工作正常。
采纳答案by Malvolio
what finally worked for me is xhr.setRequestHeader('Content-Type', 'text/plain');
最终对我有用的是 xhr.setRequestHeader('Content-Type', 'text/plain');
回答by cusspvz
I have solved my problem this way:
我已经这样解决了我的问题：
Add this to your PHP Code:
将此添加到您的 PHP 代码中：
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Credentials: true ");
header("Access-Control-Allow-Methods: OPTIONS, GET, POST");
header("Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control");
Or add these headers to your response.
或者将这些标题添加到您的响应中。
Problem: The browsers ask to the server for options before your main request, to check if the site has the option to allow comunication with different origin, and then if yes, they do your POST or GET request.
问题：浏览器在您的主要请求之前向服务器询问选项，以检查该站点是否具有允许与不同来源通信的选项，如果是，则它们执行您的 POST 或 GET 请求。
EDIT:Try this (without your hack) to see if you're receiving data...
编辑：试试这个（没有你的黑客）看看你是否正在接收数据......
$.ajax({ url : crossOriginURL,
type : "GET",
error : function(req, message) {
alert(message);
},
success : function(data) {
alert(data);
},
dataType : "text"} );
回答by Eric
It looks like the original poster may have resolved their issue, but for anyone having the same issue as commentor Elisabeth, I believe the problem may be that Chrome refuses to set a an Origin header for a CORS request if you are running the request from a local file. It won't even let you explicitly override the Origin header. This causes the server to see "Origin: null", which results in a 403 in most cases. Firefox apparently has no such constraint, as I've found after much hair-pulling.
看起来原始海报可能已经解决了他们的问题，但是对于与评论者 Elisabeth 有相同问题的任何人，我相信问题可能是 Chrome 拒绝为 CORS 请求设置 Origin 标头，如果您正在运行来自本地文件。它甚至不会让您明确覆盖 Origin 标头。这会导致服务器看到“Origin: null”，在大多数情况下会导致 403。Firefox 显然没有这样的限制，正如我在费尽心思后发现的那样。
If you absolutely need to use Chrome in this case, you can resolve your issue by running a webserver locally and always accessing your file via http: instead of via file:.
如果在这种情况下您绝对需要使用 Chrome，您可以通过在本地运行网络服务器并始终通过 http: 而不是通过 file: 访问您的文件来解决您的问题。
回答by Siddhartha Mukherjee
When i updated the chrome i was facing the problem,I've solved it Google Extension "Access-Control-Allow-Credentials" new version. if it is an old version,you will not need to work on a new Google Chrome version
当我更新 Chrome 时，我遇到了这个问题，我已经解决了 Google 扩展程序“访问控制允许凭据”新版本。如果是旧版本，则无需使用新的 Google Chrome 版本
回答by king
Check to make sure that you didn't set your server to both allow credentials and set the allow origin header to *. Like below:
检查以确保您没有将服务器设置为允许凭据并将允许源标头设置为 *。如下图：
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
If your server is returning these values for these headers, then it will not work. If you set Access-Control-Allow-Credentialsto true, then you can't use *as the value of the Access-Control-Allow-Originheader. Below is an excerpt from the MDN webdocs for the header(https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin):
如果您的服务器为这些标头返回这些值，那么它将无法工作。如果设置Access-Control-Allow-Credentials为true，则不能*用作Access-Control-Allow-Origin标头的值。以下是标题的 MDN 网络文档摘录（https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin）：
For requests without credentials, the literal value "*" can be specified, as a wildcard;
the value tells browsers to allow requesting code from any origin to access the resource.
Attempting to use the wildcard with credentials will result in an error.
If the above is the case, simply set Access-Control-Allow-Credentialsto false.
如果是上述情况，只需设置Access-Control-Allow-Credentials为false。
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: false
References
参考
回答by Daniel C. Deng
In my case, it's localhost:8001 (the front-end) which tries to call the APIs at localhost:7001 (on server.js as a Node server). Even I had the CORS plugin installed and turned on on Chrome, still the CORS policy rejected them as preflight cases.
就我而言，它是 localhost:8001（前端），它尝试调用 localhost:7001（在 server.js 上作为 Node 服务器）处的 API。即使我在 Chrome 上安装并打开了 CORS 插件，CORS 政策仍然拒绝它们作为预检案例。
It took me more than half day to finally resolve the issue. Here are the "stupid" steps, believe it or not:
折腾了半天，终于解决了这个问题。以下是“愚蠢”的步骤，信不信由你：
i. Turn OFF the CORS plugin, reload the app, at this time you should still get the errors which are correct.
一世。关闭 CORS 插件，重新加载应用程序，此时您仍然应该得到正确的错误。
ii. Turn it back ON, reload the app, if the APIs are successful, stop here, no need to proceed to iii.
ii. 重新打开，重新加载应用程序，如果APIs成功，就到此为止，无需继续进行iii。
iii. However if you still get the CORS rejection, then uninstall Chrome and install an up-to-date Chrome.
三、但是，如果您仍然收到 CORS 拒绝，请卸载 Chrome 并安装最新的 Chrome。
iv. On the new Chrome, the previously installed CORS plugin should still be there but with OFF status.
四、在新的 Chrome 上，之前安装的 CORS 插件应该仍然存在，但处于关闭状态。
v. Reload the page, you should get the CORS rejection messages on console which are correct.
v. 重新加载页面，您应该会在控制台上看到正确的 CORS 拒绝消息。
vi. Turn it back ON, reload the page, the errors should disappear.
六. 重新打开，重新加载页面，错误应该会消失。
No further ideas if the above steps still do not work in your case.
如果上述步骤在您的情况下仍然不起作用，则没有进一步的想法。
I also tried the following on server.js (Node) and still do not work, so no bother to try:
我还在 server.js (Node) 上尝试了以下操作，但仍然无法正常工作，因此无需尝试：
var app = express();
var cors = require('cors'); // Already done “npm i cors --save-dev”
app.options('*', cors());
回答by pranavbapat
CORS will work in chrome. Just use chrome is safe-mode, i.e., use disable security settings. Google it about it, or you can even start from command line also.
CORS 将在 chrome 中工作。只使用 chrome 是安全模式，即使用禁用安全设置。谷歌一下，或者你甚至可以从命令行开始。
