从浏览器缓存提供图像时，AWS S3 + CloudFront出现CORS错误 [英] AWS S3 + CloudFront gives CORS errors when serving images from browser cache

问题描述

如果清除浏览器缓存，则所有加载的内容都可以从启用了Cloudfront的S3存储桶中找到。但是，当我关闭缓存时，在控制台中出现错误：

If I clear my browser cache, everything loads just find from my cloudfront-enabled S3 bucket. When I turn off cache, however, I get errors in the console:

跨源资源已阻止加载原始图像[ORIGIN URL]共享策略：所请求的资源上不存在 Access-Control-Allow-Origin标头。因此，不允许访问源[MY LOCALHOST ADDRESS]。

MY CORS配置：

MY CORS configuration:

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

我前一段时间也遵循了此建议，并更改了cloundfront发行版设置。当时似乎还可以，但是现在绝对不能使用浏览器缓存：

I also followed this advice a while back and changed the cloundfront distro settings. It seemed to have worked back then but is definitely not working with browser cache now: CORS problems with Amazon S3 on the latest Chomium and Google Canary

我还尝试将页眉在我的网站.htaccess中添加Access-Control-Allow-Origin *。没运气。注意：我的网站是通过localhost（这是一个开发环境）托管和访问的。

I also tried putting "Header add Access-Control-Allow-Origin "*"" in my websites .htaccess. No luck. Note: my website is hosted and accessed from localhost (it's a dev environment).

推荐答案

我陷入了同样的问题，发现如下所示的暴露标题解决了这个问题：

I was stuck in the same problem and found that exposing headers as shown below solve the problem:

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>MYIP</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <ExposeHeader>ETag</ExposeHeader>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

这篇关于从浏览器缓存提供图像时，AWS S3 + CloudFront出现CORS错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！