Chrome S3 Cloudfront：初始和加载请求上没有“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】Chrome S3 Cloudfront：初始和加载请求上没有“Access-Control-Allow-Origin”标头

【英文标题】：Chrome S3 Cloudfront: No 'Access-Control-Allow-Origin' header on initial and load request

【发布时间】：2018-04-06 12:34:06

【问题描述】：

我有一个网页使用 Angular js 通过 CloudFront CDN 从 S3 加载一些图像文件。

在 Chrome 中，我将打开一个隐身窗口以及控制台。他们显示了一些错误信息 加载失败

http://cloudfront.net/image.png 请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问 Origin 'yyy'。

但火箱中没有问题，所有图像都已加载。但我只在 chrome 中遇到问题

我已经检查、更改并重新检查了 S3 和 Cloudfront 上的设置。在 S3 中，我的 CORS 配置如下所示：

    <?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedOrigin>http://*</AllowedOrigin>
    <AllowedOrigin>https://*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

也可以试试我的 .htaccess 文件，比如

<ifModule mod_headers.c>
    Header add Access-Control-Allow-Origin "*"
    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
</IfModule>

但在 chrome 浏览器中显示错误，请任何人帮助解决问题

【问题讨论】：

你读过这个吗：blog.celingest.com/en/2014/10/02/…

或者这个：serverfault.com/q/856904/153161。当第一个请求中没有 Origin: 时，S3 不会在响应中发送 Vary: Origin。

【参考方案1】：

添加一个 Cloudfront “Edge-To-Origin” Origin 标头以在每个请求（xhr 或非 xhr）上强制使用 CORS 响应标头：

来源--->http://sub.domain.com