Rails ActiveStorage S3存储图片第三方嵌入CORS报错如何解决

开发者阿泽

2026-9-24

解决方案

方案一（优先推荐，10秒解决）

移除img标签上的crossorigin="anonymous"属性即可。

只有需要通过JS读取图片像素数据（如Canvas绘图、前端图片裁切等场景）才需要配置crossorigin属性，普通图片展示完全不需要。不同浏览器对带crossorigin属性的静态资源的CORS校验严格度不同，这也是Firefox可以正常展示、其他浏览器报错的核心原因。

方案二（确需保留`crossorigin`属性时使用）

如果业务确实需要跨域操作图片资源，按以下步骤逐一排查修改：

给Rails应用配置CORS规则
当前你只配置了S3的CORS策略，但浏览器第一跳请求的是你的Rails应用的ActiveStorage重定向路由，需要先让Rails返回正确的CORS头：

首先在Gemfile中添加rack-cors依赖：
```
gem 'rack-cors'
```

执行bundle install后，新建config/initializers/cors.rb，添加如下配置：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*' # 生产环境建议替换为实际允许的第三方站点域名，安全性更高
    resource '/rails/active_storage/*',
      headers: :any,
      methods: [:get, :head, :options]
  end
end

优化S3的CORS规则
合并重复规则，补充暴露CORS头的配置，避免规则优先级匹配问题：

[
    {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET", "HEAD", "PUT", "POST"],
        "AllowedOrigins": ["*"],
        "ExposeHeaders": ["Access-Control-Allow-Origin"],
        "MaxAgeSeconds": 3000
    }
]

调整ActiveStorage的S3配置
修改config/storage.yml中S3存储的配置，强制生成S3链接时携带CORS响应头：

amazon:
  service: S3
  access_key_id: <%= ENV['AWS_ACCESS_KEY_ID'] %>
  secret_access_key: <%= ENV['AWS_SECRET_ACCESS_KEY'] %>
  region: <%= ENV['AWS_REGION'] %>
  bucket: <%= ENV['AWS_BUCKET'] %>
  upload:
    acl: "public-read"
  response_headers:
    'Access-Control-Allow-Origin': '*'