如何修复 iOS 12 Safari Cors 预检错误？答案

【问题标题】：How to fix iOS 12 Safari Cors preflight error?如何修复 iOS 12 Safari Cors 预检错误？
【发布时间】：2019-02-25 06:57:44
【问题描述】：

我正在尝试更好地理解 COR，因为我们的网络应用程序的几个用户都在抱怨，因为他们升级到 iOS 12 后收到了预检错误。

来自网络检查器的错误

[Error] Preflight response is not successful
[Error] Fetch API cannot load https://www.api.com due to access control checks.
[Error] Failed to load resource: Preflight response is not successful (v4, line 0)

客户端应用是带有 Apollo 的 React 应用。它使用 Apache HTTPD 和 Express JS 通过 HTTPS 调用服务器。

在所有其他浏览器上一切正常，这与 iOS 12 隔离。

奇怪的是，当我查看 HTTPD 访问日志时，我看不到任何预检调用。当我尝试直接访问服务器（在 iOS 12 上）时，我在日志中看到了预检 OPTIONS 请求和 POST。但是当通过 Web 应用调用服务器时，COR 预检失败。

在快递应用中，我也注销了所有请求，也没有出现。

在 HTTPD 中我有

的设置

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS

在快递我也有同样的事情。

有什么想法吗？！

【问题讨论】：

发生故障时浏览器在 devtools 控制台中报告的确切错误是什么？
@sideshowbarker 我将它添加到问题中。欢呼
好的，接下来您可能想要做的是使用 Web 检查器检查请求和响应。打开网络选项卡并重新加载，单击https://www.api.com OPTIONS 请求。查看 Access-Control-Request-Method 和 Access-Control-Request-Headers 请求标头的确切值是什么，然后检查响应以查看 HTTP 响应代码是什么，以及 Access- Control-Allow-Methods 和 Access-Control-Allow-Headers 响应标头，以及它们与请求标头的比较。
在请求的前端代码中，您是否设置了 Accept、Accept-Language 或 Content-Language 标头？
这看起来更像是 iOS 的一个错误 - 我已经用他们创建了一个错误 bugreport.apple.com/web/?problemID=44621834

标签： ios express cors apollo ios12

【解决方案1】：

这是 iOSv12 中的一个错误，但它已在 iOSv12.1 测试版 (16B5059d) 中修复，前提是当前的测试版代码已投入生产。

问题在于 iOSv12 WebKit 预检 OPTIONS 调用不会离开设备。我已经运行了 WireShark 和 iOSv12 模拟器来确认这一点。

【讨论】：

Ionic 社区首先在 iOS v12 beta 中发现了它，但根据这篇文章 v12 beta 2 解决了这个问题：stackoverflow.com/questions/50707146/…我不知道 beta 2 和 v12 之间发生了什么，我'我很惊讶另一个 stackoverflow 问题没有重新打开。
如果相同，那就是一个巨大的倒退。仍然让更多的人大吃一惊。
感谢您在此处发布信息。似乎已解决的 WebKit 错误是 bugs.webkit.org/show_bug.cgi?id=188355。修复的变更集是trac.webkit.org/changeset/234626/webkit
我没有重新打开stackoverflow.com/questions/50707146/…，因为我没有遇到iOS12最终版本的问题。我已经安装了 XCode 10 并在模拟设备上尝试了我的应用程序，就像我在 6 月份所做的那样，并没有出现问题
作为后续，iOS 12.1 已经发布，我可以确认 CORS 正在按预期工作。 @dmo 你的问题也解决了吗？

【解决方案2】：

对于遇到此问题的任何人，问题是当您有任何自定义标头时，iOS12 不喜欢<add name="Access-Control-Allow-Headers" value="*" />。这个问题在 BETA 中得到修复，但似乎从未正式发布。

解决方案是单独指定每个自定义标头，例如：<add name="Access-Control-Allow-Headers" value="*,customheader1,customheader2" />

【讨论】：

【解决方案3】：

如果它在“Access-Control-Allow-Headers”中显示 Header not allowed，您可以通过从服务器端添加特定的 Header 来修复它，您发送“Access-Control-Allow-Headers”。因为通配符不起作用即“访问控制允许标题”：“*”

应该是 “Access-Control-Allow-Headers”：“*、Accept、Content-Type、Content-Length、Accept-Encoding、CUSTOM-ALLOWED-HEADER”

【讨论】：

【解决方案4】：

如果您在 ionic 中遇到错误，请删除此插件“cordova-plugin-ionic-webview”

【讨论】：

还请分享 OP 需要删除该特定插件的原因
这就像在说“你的车有发动机问题？只需卸下你的发动机...”