问题的症状
在浏览器的控制台窗口中,我看到以下消息之一:
- 加载失败…没有“Access-Control-Allow-Origin”头
- 跨域请求阻塞:同源策略不允许读取远程资源…原因:CORS头'Access-Control-Allow-Origin'丢失
- 加载失败…对预飞行请求的响应没有通过访问控制检查:请求的资源上没有“access - control - allow - origin”标头。起源……因此不允许进入吗
消息中经常提到的关键字之一是Access-Control-Allow-Origin
.
条件
基于浏览器的web应用程序可能是Apps框架app正在尝试进行跨域调用以从外部web服务获取共享资源。这被称为CORS请求(跨源资源共享)。
有一个基于浏览器的CORS标准管理这种跨域呼叫。当不满足某些条件时,就会发生上述错误。
决议
这并不一定是一个bug,因为它可能与用户的web应用程序和远程外部服务故意不允许的用例有关。
当一个源(www.origin1.com)调用另一个源(www.origin2.com)时,这被称为跨源请求。此请求必须具备某些条件才能生效。被调用的外部服务(www.origin2.com)需要返回HTTP报头Access-Control-Allow-Origin
在其回应中。
如果外部服务没有返回此标头,则浏览器遵守CORS规范会停止请求,并返回上述错误之一。
问这些问题
- 调用的起始点URL(或原点)是什么?这有时就在错误消息本身中。
- 调用的外部服务的URL是什么?这有时出现在控制台的错误消息中。
- 正在检索什么,为什么?它是PNG文件吗?脚本、CSS或字体文件?究竟是什么被检索,它被用于什么?这可以深入了解用例,以及为什么这个远程位置的资产是重要的。
- 此外部资源是否需要身份验证才能获得?如果需要重定向,则
Access-Control-Allow-Origin
响应头可能不会返回,调用将失败。将资源的URL直接复制到一个新的隐身浏览器选项卡。这可以很好地测试它是否可以在一般情况下访问,但不能保证它将在web应用程序的代码中工作。
- 你能在浏览器的网络选项卡中看到OPTIONS HTTP方法调用吗?当跨域请求中存在自定义请求头、身份验证或其他条件时,浏览器会进行额外的HTTP调用。这也被称为飞行前电话。web应用程序的代码并没有明确地做到这一点。浏览器在后台创建并使其成为CORS规范标准的一部分。
当进行此OPTIONS调用时,需要在此调用的响应中包含某些值,以使其成功,并使对资源的实际HTTP调用发生。如果OPTIONS调用失败,则不会检索资源,并且浏览器的控制台中应该出现CORS错误。
如果看到OPTIONS调用,请记下。另外,如果您看到在OPTIONS调用之前发生了重定向(状态302)调用,请记下。
如果在OPTIONS调用中发生了重定向,那么OPTIONS调用很可能会失败。这意味着获取资源的调用也将失败并触发CORS错误。
- 获取外部资源的用例是什么?首先找出为什么要检索这个外部资源。这在提出变通方法或需要的更改时可能很重要。
- 生成一个哈尔文件.获取失败调用的快照以及之前和之后立即发生的事情可能有助于调试问题,并避免用户必须重新生成它。可以检查请求和响应中的标头,以及识别OPTIONS调用和重定向。
可能的下一步
- 谁拥有外部服务器?也许可以修改服务器以遵循CORS规范标准来返回
Access-Control-Allow-Origin
头。然而,即使服务器是内部控制的,这也不一定是包治百病的。特定的外部服务不希望共享资源可能有很好的理由。
如果外部服务器不是内部控制的东西,那么可能与该供应商合作,或者提出另一个解决方案,假设用例被认为是有效的。
- 应用程序编写使用亚博Zendesk Apps框架?后端代理服务器可通过client.request ()调用。通过设置使用该代理歌珥:假在客户端。请求的设置。请注意“错误的”也是设置的默认值。因为代理服务是后端服务,它不需要遵守基于浏览器的CORS规范,所以跨域调用使用代理可能会成功。
这也不总是包治百病。代理服务不支持从外部服务检索二进制文件或二进制信息。也许还有其他特定于应用程序的原因,这不是一个解决方案。
- 资源可以直接嵌入到web应用程序吗?与其跨域获取资源,不如考虑将其包含在web应用中。这完全避免了跨域调用(因为它现在是本地资源),任何CORS问题都可能消失。然而,这并不总是一个解决办法。有时外部资源url不能提前知道,或者资源太大而不适合作为本地资源,或者资源变化太频繁而不能作为本地静态资源下载。
- 浏览器版本是什么?尽管CORS规范是一个标准,浏览器返回的错误消息可能会有所不同。Chrome返回的控制台消息与Firefox不同。
- 有时没有解决办法。有时,来自外部服务的资源请求并不意味着在浏览器web应用程序的上下文中共享。资源所有者决定是否共享资源。这并不取决于web应用程序。这可能是设计好的。
有关更多信息,请参阅以下参考资料:亚博电脑端
- 来自维基百科的文章:跨域资源共享
- 文章来自网络。戴夫:跨域资源共享(CORS)
- 文章来自Mozilla:跨域资源共享(CORS)
- 文章来自Mozilla:选项
- 文章来自Fetch:获取
- 文章来自Fetch:歌珥协议
0评论
请登录留下评论。