Rails 5.2 Active Storage直传失败：缺失CORS头‘Access-Control-Allow-Origin’

嘿，我之前踩过Active Storage直接上传云端时的CORS坑，给你几个亲测有效的排查和解决步骤，应该能搞定这个跨域错误：

• 第一步：重点检查云端存储服务的CORS配置
  直接上传是浏览器和云端存储（比如S3、Google Cloud Storage）直接通信，所以云端必须明确允许你的网站域名发起跨域请求，这是90%以上这类问题的根源。

  • 以AWS S3为例，你需要在存储桶的CORS策略里添加允许OPTIONS、POST、PUT方法，同时指定你的生产环境域名和本地开发域名（比如http://localhost:3000），还要允许Active Storage发送的各类请求头。
  • 给你个参考的S3 CORS配置（JSON格式）：

    [
      {
        "AllowedHeaders": [
          "*"
        ],
        "AllowedMethods": [
          "PUT",
          "POST",
          "DELETE",
          "OPTIONS"
        ],
        "AllowedOrigins": [
          "https://your-production-domain.com",
          "http://localhost:3000"
        ],
        "ExposeHeaders": [
          "ETag"
        ]
      }
    ]
    

  注意：有些存储服务的CORS配置不会立即生效，可能需要等待几分钟再测试。

• 第二步：确认Active Storage的基础配置没出错
  先确保你在表单里正确开启了直接上传：

  <%= form.file_field :pdf, direct_upload: true %>
  

  同时检查application.js里已经导入了Active Storage的JS文件：

  //= require activestorage
  

• 第三步：用浏览器调试工具定位细节
  如果还是报错，打开浏览器开发者工具（F12）的「网络」标签，找到那个失败的跨域请求：

  • 看请求的Origin头是不是你的网站域名，确认它在云端CORS配置的AllowedOrigins列表里；
  • 看云端返回的响应头，有没有Access-Control-Allow-Origin字段，没有的话要么配置没生效，要么配置写错了。

• 关于activestorage.js请求头的补充
  你提到的activestorage.js里固定的请求头不用去修改，只要云端的CORS策略允许这些请求头（比如Content-Type、X-Requested-With等），就不会触发跨域错误，所以重点还是放在云端的配置上。

内容的提问来源于stack exchange，提问作者KeithP