Question

我在从我的网站上做CORS请求时遇到了一个奇怪的错误（React应用程序通过https与API通信）。这些错误仅出现在IOS 10.3.1和Chrome浏览器（57）上（safari和webViews都很好）。由于缺乏调试IOS Chrome的工具，我所拥有的唯一记录就是Sentry记录的内容（第三方服务）。错误是：

的变化

SecurityError阻止原始“https://xxxxxreactapp.com”的框架从访问原始框架 “https://xxxxx.fls.doubleclick.net”。协议，域和端口必须匹配。

特定请求是从Google跟踪代码管理器中触发的，但是对我自己的API的请求也以类似的方式失败（尽管显然没有提到框架，但仍然是跨域相关的）。

对我自己的API的典型请求握手如下：

OPTIONS /jp/plusbus HTTP/1.1
Host: api-xxxxxx.xxx.com
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Access-Control-Request-Method: POST
Origin: https://xxxxxreactapp.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36
Access-Control-Request-Headers: content-type,x-access-token,x-trace-token
Accept: */*
Referer: https://xxxxxreactapp.com/xxxx/xxx
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,el;q=0.6

和服务器对此的响应：

HTTP/1.0 204 No Content
Connection: close
Content-Type: text/html
Access-Control-Max-Age: 1728000
Access-Control-Allow-Origin: *
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET,POST,PUT,DELETE,PATCH
Access-Control-Allow-Headers: DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,X-Access-Token,X-Customer-Token,X-Customer-Device,X-Brand-Id,X-User-Token,X-User-Grant-Token,X-Trace-Token,X-Smartcard-Version,Authorization
Content-Length: 0

这描述了App和我控制的API之间的交互，我很想我的设置有问题，但有两件事导致了不同的结论：

我也在同一网站上使用Google代码管理器，其请求也以同样方式失败（GTM使用标准iframe设置，也尝试CROSS-ORIGIN通信）。
此设置一直稳定到最后一次IOS更新，它在IOS 10.2中都能正常运行

更新

管理以解决api调用，它与我的代理中间件堆栈有关。但第三方问题仍未解决。

依赖iframe将数据传输到外部源的所有工具都失败了上面提到的SecurityError Blocked a frame ....包括GoogleTagManager和Paypal付款

Answer 1

特别是关于iframe问题，此错误似乎与Chrome自动填充有关。您可以使用相关铬问题comment 6中提供的示例代码重现错误（值得一直阅读）：

ntoc+1

如果您在iOS Chrome中打开此页面，则会弹出上述错误的提醒。如果您转到Chrome设置，关闭自动填充功能并重新加载页面，则错误消失。这是通过iOS 10.3.1和Chrome版本58.0.3029.113测试的。

此时似乎没有解决方案，但似乎即使出现错误，iframe中的内容也会成功加载。因此，对最终用户不应有明显的影响。

IOS 10.3.1 Chrome浏览器CORS失败

1 个答案: