仅在 iOS 移动 Safari 中上传图像时出现错误的 CORS 失败

Posted 2023-03-04

【中文标题】仅在 iOS 移动 Safari 中上传图像时出现错误的 CORS 失败

【英文标题】：False CORS failure only in iOS mobile safari when uploading images

【发布时间】：2018-10-12 23:31:03

【问题描述】：

我在 ios 11.3.1 和 iOS 模拟器中使用 iPhone 6 在移动 Safari 上遇到了一个奇怪的错误。

我有一个 Ionic 应用程序（PWA，不是 Cordova），它使用 Laravel (php) 构建的后端 API 几个月来一直运行良好。我在上面配置了 CORS，它工作正常。

我刚刚尝试实现一个新功能，即上传图片，但它只在移动 Safari 上中断。

我看到OPTIONS 请求通过了，它看起来是正确的。事实上，除了桌面 Safari 中的 User-Agent 有效之外，请求/响应看起来是一样的。

在桌面 Safari 上，这后面是 POST，它成功了。

在移动 Safari 上，POST 甚至不会尝试外出，而是收到一条消息 Failed to load resource: Origin https://upload.geekity.com is not allowed by Access-Control-Allow-Origin.，尽管 OPTIONS 请求返回 https://upload.geekity.com for Access-Control-Allow-Origin。

这里是OPTIONS 和POST 在桌面和移动 safari 上的网络检查器的屏幕截图。

您可以在这里查看源代码：image-upload。

我真的不知道这里会发生什么以这种方式失败。

【问题讨论】：

尝试在 OPTIONS 响应中的“Access-Control-Allow-Headers”响应标头中添加“Origin”。（Access-Control-Allow-Headers: ORIGIN, AUTHORISATION）***.com/questions/16824661/…

较小的图像会发生这种情况吗？

是的，小图像也会发生这种情况。事实上，如果我注释掉将图像附加到请求的代码行，请求就可以正常工作。

您找到解决方案了吗？我也有同样的问题。

很遗憾，我还没有找到解决方案。我们暂时不使用该功能。

【参考方案1】：

您是对的，CORS 错误消息非常具有误导性。在过去的几天里，我一直在为同样的问题苦苦挣扎，结果发现我试图从手机上传的图像对于我正在使用的应用服务器来说太大了，它是 Kubernetes 上的 nginx；所以对我有用的解决方法是将此注释添加到入口配置中

nginx.ingress.kubernetes.io/proxy-body-size: "0"

取消对上传大小的任何限制。

【参考方案2】：

对于 laravel-5.4.* 在 .htaccess 文件中添加以下行

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "X-API-KEY, Origin, X-Requested-With, Content-Type, Accept,Authorization"

【讨论】：

这并没有改变任何东西。我正在为 API 使用barryvdh/laravel-cors 库，它设置为返回任何请求的标头。 authorization 是 OPTIONS Access-Control-Request-Headers 请求中列出的唯一标头，因此它是之前唯一返回的标头。

【参考方案3】：

尝试将端点添加到您的服务器，例如/api/ping。当您的应用启动时，首先向端点发送请求：

http.get('/api/ping');

没有身份验证，那么后续请求应该可以工作。

我还没有尝试过解决方案，但可能会有所帮助。

【讨论】：

CORS 在整个应用程序中运行良好，可用于其他帖子。就是这个附上图片的。

【参考方案4】：

使用本机 http 功能来避免这种情况 https://ionicframework.com/docs/native/http/ 它会完美地工作

【讨论】：

我没有使用 Cordova。这是一个网络应用程序。

使用 jonp 但我不确定