配置 caddy、S3 和 CloudFront 的正确方法答案

【问题标题】：Correct way to configure caddy, S3, and CloudFront配置 caddy、S3 和 CloudFront 的正确方法
【发布时间】：2019-02-09 08:46:31
【问题描述】：

我的最终目标是拥有具有最佳实践设置的 Caddy、Django、S3 和 CloudFront。

问题是Chrome 不是从S3 执行字体，但css 可以这是控制台错误

在以下位置访问字体 'https://herr.s3.amazonaws.com/static/admin/fonts/Roboto-Regular-webfont.woff' 来自原点“https://herr.reviews”已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“https://herr.reviews” 访问。

在以下位置访问字体 'https://herr.s3.amazonaws.com/static/admin/fonts/Roboto-Light-webfont.woff' 来自原点“https://herr.reviews”已被 CORS 策略阻止：否请求中存在“Access-Control-Allow-Origin”标头资源。因此不允许使用原点“https://herr.reviews” 访问。

我很怀疑。如果我的配置错误。
为什么css 会出现在浏览器中？

CaddyFile

www.{$DOMAIN_NAME} {
    redir https://herr.reviews
}

{$DOMAIN_NAME} {
    proxy / django:5000 {
        header_upstream Host {host}
        header_upstream X-Real-IP {remote}
        header_upstream X-Forwarded-Proto {scheme}
    }
    log stdout
    errors stdout
    gzip
}

我确认我可以从S3 上传和下载media 文件 CaddyFile 是默认设置表单django-cookies-cutter

问题：
我哪里错了？

【问题讨论】：

标签： django amazon-web-services amazon-s3

【解决方案1】：

嘿，我知道这是一篇旧帖子，但我刚刚在 rails 应用程序上遇到了几乎完全相同的配置问题。我在Medium写了一篇关于它的文章。

Cloudfront 正在缓存来自您的 Web 服务器的响应。直接文件没有问题，但是，您很可能有一个请求该字体的 css 文件，而您的浏览器正在发出辅助请求。因此，现在从不同来源（您的 CDN）加载的 css 文件现在正在请求加载字体，因此出现 CORS 错误。

您需要在 Caddy 的响应中包含一个标头，说明在该目录中提供文件时哪些来源可以抓取该文件。然后，Cloudfront 将缓存该响应，您将解决 CORS 错误。

此示例基于 Caddy 2 的配置，但概念相同。

首先，我们创建一个名为@assets 的匹配器。该匹配器将匹配对 $DOMAIN_NAME 的任何请求，路径为 /assets/。

然后我们指定 2 个标头，一个允许任何来源，另一个指定允许的请求类型（get/post）。

 @assets{
    host $DOMAIN_NAME
    path /assets/
  }

  header @assets Access-Control-Allow-Origin "*"
  header @assets Access-Control-Allow-Methods “GET, POST”

由于您仅使用单个名称而不是其他子域提供服务，因此您不需要额外的主机匹配器，您还可以将源锁定到您的 $DOMAIN_NAME。

这里有一个稍微简单的替代 sn-p 应该做同样的事情。

header /assets/ Access-Control-Allow-Origin "$DOMAIN_NAME"
header @assets Access-Control-Allow-Methods “GET, POST”

将任一 sn-p 放入您的主机块中，您就可以参加比赛了。

【讨论】：

【解决方案2】：

这很好，因为font 在 Django 模板中是硬编码的。如果像css, javascript, and media 这样的直接文件正在工作。没问题。

在 Django 制作中。人们从其他技术获得 Django 管理页面。例如 ssh 和隧道到数据库，然后来自本地主机的runserver

【讨论】：