在 Heroku 和 Amazon S3 上的生产 Rails/Vue 应用程序中加载字体时出现 CORS 错误

Posted 2023-03-03

【中文标题】在 Heroku 和 Amazon S3 上的生产 Rails/Vue 应用程序中加载字体时出现 CORS 错误

【英文标题】：CORS error when loading Fonts in production Rails/Vue app on Heroku and Amazon S3

【发布时间】：2019-05-10 06:22:17

【问题描述】：

我有一个 rails/VueJS 应用程序没有通过 font-awesome 加载我的 S3 svg 文件和字体。我已将所有文件上传到 S3 中的相关存储桶文件夹。通过我的应用上传的任何文件都可以正确显示 - 但是这些静态文件和字体不起作用。 CORS错误如下：

错误 #1（字体）：

Access to font at 'https://s3.amazonaws.com/myappname/fonts/fontname-regular.woff' from origin 'https://nyappname.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

错误 #2（对于 svg 图像）：

GET https://s3.amazonaws.com/myappname/avatar-group.svg 404 (Not Found)

我认为这些都是由相同的 CORS 设置问题引起的，但我不确定。我在我的 CSS 文件中的不同位置按如下方式调用这些文件：

自定义.css

.avatar:after

    position: absolute;

    width: 0;
    height: 0;

    content: '';

    background-image: url(https://s3.amazonaws.com/myappname/avatar-status.svg), url(https://s3.amazonaws.com/myappname/avatar-group.svg), url(https://s3.amazonaws.com/myappname/avatar-group-hover.svg), url(https://s3.amazonaws.com/myappname/avatar-group-hover-last.svg);

我在 Amazon S3 中的 CORS 配置应该是什么？是否应该仅在根存储桶上设置此配置？我已经尝试了一百件事无济于事，所以任何帮助都会很棒......谢谢，

更新：

S3 存储桶中的当前 CORS 配置：

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

【参考方案1】：

我认为CORSRule 每个标签只允许 1 个AllowedOrigin。你可以改成

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

【参考方案2】：

在尝试了几个小时后，我意识到这是一个该死的错字（一个字母）。如果它可以帮助遇到类似问题的任何人，我会通过深入研究 chrome 控制台错误并单击实际的链接/文件名来取得进展，这些链接/文件名在浏览器中显示我的 s3“存储桶名称不存在”的错误。这有助于查明问题。