Rails集成CloudFront作CDN时字体资源CORS问题求解

既然你的字体是从Rails服务器而非S3提供的，问题通常出在CloudFront的请求/响应头配置和Rails的CORS中间件设置这两个环节，我帮你一步步排查：

1. 检查CloudFront缓存行为的关键配置 #

首先确认你的CloudFront分发的缓存行为（对应Rails资源的路径）是否做了以下设置：

• 允许的HTTP方法：必须勾选 OPTIONS（CORS预检请求用的是OPTIONS方法，漏掉的话会直接失败）
• 请求头白名单：除了Origin，还要添加 Access-Control-Request-Method 和 Access-Control-Request-Headers，这两个是预检请求的核心头，CloudFront默认会过滤，必须手动加入白名单才能转发给Rails后端
• 缓存键配置：如果你的应用允许多个域名访问，要把Origin加入缓存键的包含请求头里（自定义缓存策略时设置），否则CloudFront会把一个Origin的CORS响应缓存给其他Origin，导致跨域错误
• 响应头白名单：确保 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 这几个响应头被包含，这样CloudFront才会把Rails返回的CORS头转发给客户端

2. 配置Rails的CORS中间件 #

因为字体由Rails提供，必须让Rails正确返回CORS响应头。修改config/initializers/cors.rb：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    # 生产环境建议指定具体域名，不要用*
    origins 'your-production-domain.com', 'cdn.your-domain.com'
    # 匹配字体文件的路径（如果用asset pipeline，通常是/assets/*）
    resource '/assets/*',
      headers: :any,
      methods: [:get, :options], # 允许GET请求和OPTIONS预检
      expose_headers: ['Content-Type']
  end
end

如果你的字体放在其他路径（比如/public/fonts），把resource改成对应的路径即可。

3. 确保Rails Asset Pipeline正确处理字体 #

如果用Rails的Asset Pipeline管理字体，需要在config/application.rb里添加字体扩展名到预编译列表：

config.assets.precompile += %w( .svg .eot .woff .woff2 .ttf )

这样Rails才会正确编译和提供字体文件。

4. 测试验证 #

用浏览器开发者工具的网络面板查看字体请求：

• 检查OPTIONS预检请求的响应状态码是否为200，且响应头包含Access-Control-Allow-Origin等CORS头
• 检查字体的GET请求响应头是否包含Access-Control-Allow-Origin，且值匹配当前访问的域名

如果还是有问题，可以尝试先绕过CloudFront，直接访问Rails服务器的字体URL，看是否返回正确的CORS头，以此判断是CloudFront的问题还是Rails的问题。

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