时间戳

首页 > 解决方案 > 如何让 CORS 为从 Cloudfront 加载的图像和运行 NGINX 的服务器工作？

nginx - 如何让 CORS 为从 Cloudfront 加载的图像和运行 NGINX 的服务器工作？

问题描述

我试图弄清楚如何正确地让 CORS 处理我们网站的所有图像 - 这样我们就可以使用我正在构建的 PWA 的 WorkBox 缓存它们。

我们目前的设置如下 -

我的主站点正在运行，https://www.MyAwesomeSite.com并且我已将 AWS Cloudfront 配置为通过 URL 提供我们所有的静态资产（js、css 和图像）https://data.MyAwesomeSite.com/。

我的 PWA 几乎准备就绪 - 除了opaque响应（来自 Cloudfront 的所有图像）按预期超出缓存大小。也就是说，实际缓存大小约为 200KB - Chrome 报告它约为 300 - 400 MB。

在调查这个问题时，我发现 Workbox 有时可能会缓存不透明的响应，这会导致缓存大小问题。

在阅读了多篇关于 CORS 的帖子和文章后 - 我仍然不确定是否需要在我的服务器上运行的 NGINX 上启用 CORS 或在 Cloudfront 上配置它。

我的第一种方法：

我尝试按照以下指南在我的 NGINX 服务器上启用 CORS：https ://enable-cors.org/server_nginx.html 。但是，按原样使用代码会导致整个站点显示 404 错误。

为了调查这个新问题，我发现if里面的块location不可靠，不推荐使用。我尝试使用maps函数，但它不起作用。我在 NGIX 上启用 CORS 的最后一种方法是：

server {

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 http2 ssl; # managed by Certbot

    root /path/to/my/files;
    server_name www.MyAwesomeSite.com;
    index index.php index.html index.htm index.nginx-debian.html;

    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Content-Type,Accept,Origin,User-Agent,DNT,Cache-Control,X-Mx-ReqToken';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    client_max_body_size 32M;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

# Rest of the configuration

虽然我不确定这种方法是否正确——以及它是否真的是正确的方法；我确实在从我的服务器加载的视图的常规 GET 请求中看到了新标头

我的第二种方法

然后，我尝试在 AWS 技术支持的帮助下在我的 Cloudfront 上设置 CORS，它似乎按预期工作。

然后为了解决我最初的问题，我按照谷歌的建议添加crossorigin="anonymous"到我网站上的所有图像标签中。

但这导致了一个新的问题！

添加到crossorigin="anonymous所有图像中；我发现 Chrome 会随机消失图像，说明响应中不存在“Access-Control-Allow-Origin”标头。

我的主要问题如下 -

  1. 我的所有图像都没有通过 XHR 请求加载。我还需要CORS吗？如果我这样做 - 我应该在我的 NGINX 或 Cloudfront 上启用它吗？

  2. 如何确保为我的 PWA 缓存图像资产，而不会真正炸毁缓存？

  3. 我错过了什么重要的事情吗？

我真的很感谢任何帮助我解决这个问题的人。自过去 72 小时以来，我一直在尝试解决这个问题，但没有任何成功。

标签： nginxcorsamazon-cloudfrontprogressive-web-appsworkbox

解决方案

您从不同来源访问的来源需要启用跨域请求。

也就是说，如果您希望在脚本中读取该数据，您的 CloudFront 配置data.myawesomesite.com需要具有适当的Access-Control-Allow-Origin标头和相关标头（如有必要），以允许来自加载的站点的请求。www.myawesomesite.com

推荐阅读