【问题标题】:HTML import Amazon s3 No 'Access-Control-Allow-Origin' header is present on the requested resourceHTML 导入 Amazon s3 请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】:2016-09-07 07:08:24
【问题描述】:

我正在从启用了cors 的 cdn 加载我的所有项目资源,但是 html 导入在第一个页面加载时失败(然后在加载之后成功)。

link(rel="import" id="htmlImports" href=`components.html` async)

产生以下错误:

s3 amazon No 'Access-Control-Allow-Origin' header is present on the requested resource.

我搜索了几乎所有相关页面并尝试了一百万个解决方案,例如:

  1. 在 s3 存储桶上添加 cors 标头,有人说范围解决了他们的问题,有人说暴露标头解决了他们的问题,我添加了所有并在它们之间切换,但同样的问题。

<?xml version="1.0" encoding="UTF-8"?> <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <CORSRule> <AllowedOrigin>http://*</AllowedOrigin> <AllowedOrigin>https://*</AllowedOrigin> <AllowedMethod>GET</AllowedMethod> <ExposeHeader>ETAG</ExposeHeader> <ExposeHeader>Accept-Ranges</ExposeHeader> <ExposeHeader>Content-Range</ExposeHeader> <ExposeHeader>Content-Encoding</ExposeHeader> <ExposeHeader>Content-Length</ExposeHeader> <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader> <AllowedHeader>range</AllowedHeader> <AllowedHeader>*</AllowedHeader> </CORSRule> </CORSConfiguration>

  1. 在cors规范中,据说重复的cors header会导致请求失败,所以我确保没有重复。

  2. 在服务器上启用了预检请求并包含所有必需的配置(允许的标头等)。

【问题讨论】:

    标签: amazon-s3 cors polymer web-component html-imports


    【解决方案1】:

    解决方案

    我的问题的解决方案是将crossorigin="anonymous" 添加到导入链接

    link(rel="import", id="htmlImports", href=`components.html`,
         async, crossorigin="anonymous")
    

    默认s3桶发送Access-Control-Allow-Credentials: true标头,因此通过添加crossorigin="anonymous"

    对元素的跨域 CORS 请求将设置省略凭据标志。

    这将使 html 导入请求每次都能正常工作。

    注意

    如果有人有替代方案或可以详细解释行为,请这样做!

    【讨论】:

      猜你喜欢
      • 2015-04-18
      • 2018-06-20
      • 2018-12-21
      • 2013-11-29
      • 2014-07-28
      • 2014-01-19
      相关资源
      最近更新 更多