Safari 中的 CORS 错误，而不是 Chrome

Posted 2023-03-04

【中文标题】Safari 中的 CORS 错误，而不是 Chrome

【英文标题】：CORS error in Safari, not in Chrome

【发布时间】：2018-08-24 13:44:21

【问题描述】：

我正在构建一个文件上传器， 在前端使用Vue Dropzone， 和后端的自定义 php。

我的前端脚本正在发送带有以下标头的请求：

请求标头 POST /jobimport HTTP/1.1 主机：myurl 连接：保持活动 内容长度：765309 来源：http://localhost:8080 用户代理：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (Khtml, like Gecko) Chrome/65.0.3325.162 Safari/537.36 内容类型：multipart/form-data；边界=---- WebKitFormBoundaryhaaAoTz2J5iipi3M 接受：应用程序/json 缓存控制：无缓存 X-Requested-With: XMLHttpRequest 推荐人：http://localhost:8080/import 接受编码：gzip、deflate、br 接受语言：en-US,en;q=0.9,nl;q=0.8,de;q=0.7,fr;q=0.6

在后端的 .htaccess 文件中，我添加了以下几行：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "*"

使用 Chrome 时，文件上传没有问题。 在查看请求标头时，我什至看到以下内容：

响应标头 (...) 访问控制允许标头：* 访问控制允许来源：* (...)

但是，当使用 Safari 时，上传失败，并且出现以下错误：

加载资源失败：Access-Control-Allow-Headers 不允许请求标头字段 Cache-Control。 XMLHttpRequest 无法加载 https://myurl。 Access-Control-Allow-Headers 不允许请求头域 Cache-Control。

我不明白这在 Chrome 中是如何工作的，但在 Safari 中却不是。

【问题讨论】：

我猜这是因为 Chrome 支持在 Access-Control-Allow-Headers 中使用 * 来表示“任何标题名称”，而 Safari 不支持。因此，要使其在 Safari 中运行，您需要明确列出您希望允许的每个标头名称 - 例如，Cache-Control

@sideshowbarker 是正确的。将* 用于Access-Control-Allow-Headers 和Access-Control-Allow-Methods 的功能是最近才出现的，尚未在所有浏览器中实现。

【参考方案1】：

@sideshowbarker 和 @roryhewitt 的 cmets 是正确的， Safari 确实不支持将通配符 * 用于 Access-Control-Allow-Headers。 我明确列出了所有标题而不是使用通配符，现在它可以完美运行了。

【参考方案2】：

如果父域 URL 在 https 中，您必须在 https 中调用 ajax URL。如果没有，请不要使用 https。希望这会有所帮助