Rails 5.2 Active Storage 直接上传失败：缺少 CORS 标头“Access-Control-Allow-Origin”答案

【问题标题】：Rails 5.2 Active Storage direct upload failure: CORS header ‘Access-Control-Allow-Origin’ missingRails 5.2 Active Storage 直接上传失败：缺少 CORS 标头“Access-Control-Allow-Origin”
【发布时间】：2023-03-13 20:36:02
【问题描述】：

我正在试用 Rail 5.2.0.rc1 Active Storage，使用其包含的 JavaScript 库将 PDF 文档直接从客户端上传到云端。但是在提交表单时，我在 Firefox 和 Chrome 中都遇到了浏览器错误：

Cross-Origin Request Blocked... (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

因此在 activestorage.js 中设置了标头 this.xhr.setRequestHeader... 并且似乎不可配置：https://github.com/rails/rails/blob/master/activestorage/app/javascript/activestorage/blob_record.js

有什么建议吗？

【问题讨论】：

标签： amazon-s3 rails-activestorage ruby-on-rails-5.2

【解决方案1】：

尝试在 S3 存储桶上设置 CORS 权限：

<?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>Authorization</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <MaxAgeSeconds>3000</MaxAgeSeconds>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

【讨论】：

谢谢，是的，解决了。下一个问题是返回 403 禁止，如果我授予对 S3 存储桶的完全公共访问权限，这当然会消失。但希望我们不必这样做？
您确定网址没有过期吗？
要是这样就好了！不，这似乎是关于授予 AWS 中存储桶的正确权限。调查已保存授予对该帐户的完全访问权限的存储桶策略（“操作”：“s3：*”），然后以该帐户身份登录。但是作为那个用户，我在尝试下载我刚刚上传的文件时被拒绝访问！
我们为直接上传工作而采取的所有步骤都在这里：keithpblog.org/post/active-storage-on-amazon-s3
Answer 在我的机器 (localhost:3000) 上进行本地开发时仍然适用于 Rails 5.2.4。