首页 文章

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

提问于
浏览 次
0

我有一个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文件的不同位置调用这些文件如下：

Custom.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配置应该是什么？是否应该仅在根桶上设置此配置？我已经尝试了一百件事无济于事，所以任何帮助都会很棒... thx，

更新：

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>
heroku vue.js amazon-s3 cors ruby-on-rails-5

2 回答

  • 0

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

    回复于
  • 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>
    回复于

相关问题