Javascript Safari 10.1：由于访问控制检查，无法加载带有查询参数的 XMLHttpRequest
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43517254/
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
Safari 10.1: XMLHttpRequest with query parameters cannot load due to access control checks
提问by Marius
When trying a CORS requeston Safari 10.1, on an URL which includes query parameters (e.g. https://example.com/api?v=1), Safari says
当CORS request在Safari 10.1包含查询参数的 URL（例如https://example.com/api?v=1）上尝试 a时，Safari 说
XMLHttpRequest cannot load due to access control checks
由于访问控制检查，XMLHttpRequest 无法加载
Chrome/Firefox works fine.
Chrome/Firefox 工作正常。
On requests from the page without the ?v=1, Safari works fine too.
对于来自没有 的页面的请求?v=1，Safari 也能正常工作。
I tried changing the server response header from
我尝试从
Access-Control-Allow-Origin: https://example.com
to
到
Access-Control-Allow-Origin: https://example.com/api?v=1
but that breaks Chrome.
但这打破了 Chrome。
Any suggestions?
有什么建议？
回答by Seika85
You're running into CORS issues.
您遇到了 CORS 问题。
Some possible causes:
一些可能的原因：
- The header
Access-Control-Allow-Origincan only be set on server side, not in your clients script. (You did not make clear you did that correctly.) - Are you sure the protocol (
httpvshttpsvs maybe evenfile) is exactly the same? - If you may have multiple sub domains you need to setup your config (e.g. Apache) with something like
"^http(s)?://(.+\.)?test\.com$.
The^marks the start of the line to prevent anything preceeding this url. You need a protocol and allowing both here. A subdomain is optional. And the$marks the end of line (you don't need to set sub-pages, because origin is only host based). - As stated hereadding
Access-Control-Allow-Headers: Originto the server configuration as well may be a solution. Try to compare the actual requests made my Safari to the successfull requests done by Firefox or Chrome to spot possible missing Headers as well (and maybe compare them to your server configuration as well).
- 标头
Access-Control-Allow-Origin只能在服务器端设置，而不能在您的客户端脚本中设置。（您没有明确表示您这样做是正确的。） - 您确定协议（
httpvshttpsvs 甚至可能file）完全相同吗？ - 如果您可能有多个子域，则需要使用类似
"^http(s)?://(.+\.)?test\.com$.
该^标记在该行的开始，以防止任何前述这个网址。您需要一个协议并在此处允许两者。子域是可选的。并$标记行尾（您不需要设置子页面，因为来源仅基于主机）。 - 正如此处所述，添加
Access-Control-Allow-Headers: Origin到服务器配置也可能是一种解决方案。尝试将我的 Safari 发出的实际请求与 Firefox 或 Chrome 完成的成功请求进行比较，以发现可能丢失的标头（也可能将它们与您的服务器配置进行比较）。
回答by mdeora
Trying following might work -
尝试以下可能有效 -
Access-Control-Allow-Origin: <origin> | *
回答by Christian Kaal
If anyone comes across this error, it just occurred in the application I was building. In my case, it turned out to be a trailing / in the uri, which caused a 301 response, which was for some reason interpreted by Safari as a 500 response.
如果有人遇到这个错误，它只是发生在我正在构建的应用程序中。就我而言，结果是 uri 中的尾随 /，导致 301 响应，出于某种原因，Safari 将其解释为 500 响应。
回答by Andersson Mesa
The problem is because it is necessary to be more specific in the data of the cors this does not happen in the other operating systems that do interpret it
问题是因为有必要在 cors 的数据中更加具体，这在其他解释它的操作系统中不会发生
This one worked for me for a back in php
这个对我有用，可以帮助我回到 php
header ("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
header ("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header ("Allow: GET, POST, OPTIONS, PUT, DELETE");
$ method = $ _SERVER ['REQUEST_METHOD'];
if ($ method == "OPTIONS") {
???? die ();
}
回答by Henk Poley
Your server needs to reply to the OPTIONS http method. Not only to GET/POST/PUT/DELETE. Safari silently requests this hidden in the background. You can discover this with a MITM-attack on the connection, e.g. Fiddler.
您的服务器需要回复 OPTIONS http 方法。不仅要 GET/POST/PUT/DELETE。Safari 悄悄地请求隐藏在后台。您可以通过对连接的 MITM 攻击来发现这一点，例如Fiddler。
The OPTIONS request at least needs to respond with the Cross-Origin Resource Sharing (CORS) headers, e.g.:
OPTIONS 请求至少需要响应跨域资源共享 (CORS) 标头，例如：
- Access-Control-Allow-Headers
- Access-Control-Allow-Methods
- Access-Control-Allow-Origin
- 访问控制允许标题
- 访问控制允许方法
- 访问控制允许来源
Additionally: Your Web Application Firewall (WAF) or Application Security Manager (ASM) needs to allow the OPTIONS request to pass through to your server. Often this is blocked by default, because it gives some slivers of information about the attack surface variables (http methods & headers) used by your API.
此外：您的 Web 应用程序防火墙 (WAF) 或应用程序安全管理器 (ASM) 需要允许 OPTIONS 请求传递到您的服务器。这通常在默认情况下被阻止，因为它提供了有关 API 使用的攻击面变量（http 方法和标头）的一些信息。
