HTML import Amazon s3 请求的资源上不存在 'Access-Control-Allow-Origin' header
HTML import Amazon s3 No 'Access-Control-Allow-Origin' header is present on the requested resource
我正在从启用了 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.
我搜索了几乎所有相关页面并尝试了上百万个解决方案，例如：
- 在 s3 存储桶上添加 cors headers，有人说 range 解决了他们的问题，有人说 expose header 解决了他们的问题，我添加了所有内容并在它们之间切换，但是同样的问题。
<?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>
在cors规范中，据说重复的cors header会导致请求失败，所以我确保没有重复。
预检请求已在服务器上启用并包含所有必需的配置（允许 headers 等）。
解决方案
我的问题的解决方案是将 crossorigin="anonymous" 添加到导入 link
link(rel="import", id="htmlImports", href=`components.html`,
async, crossorigin="anonymous")
默认情况下 s3 存储桶发送 Access-Control-Allow-Credentials: true header，因此通过添加 crossorigin="anonymous"
Cross-origin CORS requests for the element will have the omit credentials flag set.
这将使 html 导入请求每次都有效。
备注
如果有人有替代方案或可以详细解释行为，请做！
我正在从启用了 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.
我搜索了几乎所有相关页面并尝试了上百万个解决方案，例如：
- 在 s3 存储桶上添加 cors headers，有人说 range 解决了他们的问题，有人说 expose header 解决了他们的问题，我添加了所有内容并在它们之间切换，但是同样的问题。
<?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>
在cors规范中，据说重复的cors header会导致请求失败，所以我确保没有重复。
预检请求已在服务器上启用并包含所有必需的配置（允许 headers 等）。
解决方案
我的问题的解决方案是将 crossorigin="anonymous" 添加到导入 link
link(rel="import", id="htmlImports", href=`components.html`,
async, crossorigin="anonymous")
默认情况下 s3 存储桶发送 Access-Control-Allow-Credentials: true header，因此通过添加 crossorigin="anonymous"
Cross-origin CORS requests for the element will have the omit credentials flag set.
这将使 html 导入请求每次都有效。
备注
如果有人有替代方案或可以详细解释行为，请做！