Rails 的 JS 文件和 URL 重写问题

Question

在我的根域 (example.com) 中，我使用渲染 UI 输入了重写规则，以便访问 example.com/library 的用户将看到托管在 library.example.com 上的应用程序。

现在访问 example.com/library 时，由于 CORS 错误，JS 未加载。相反，CSS 已成功加载。

我使用 Rails importmap（如果相关）。

<script type="importmap" data-turbo-track="reload">{
  "imports": {
    "application": "https://library.example.com/assets/application-ec9fb8976583666f9882e99ffe94f0391fc9ac4f1a32034d128201c87ac33ca3.js",
    "@hotwired/turbo-rails": "https://library.example.com/assets/turbo.min-dfd93b3092d1d0ff56557294538d069bdbb28977d3987cb39bc0dd892f32fc57.js",
    "posthog-js": "https://library.example.com/assets/posthog-js-27c6009e7053c1cc4ca4881a8510159e64330186618212ecf07859f877b74651.js",
    "posthog-custom": "https://library.example.com/assets/src/posthog-e818ed81c53c6838d2ee7e8efc4f6faaf02a31bc3ea7e95fe0b56eacbdd4c025.js",
    "video-custom": "https://library.example.com/assets/src/video-eefb06ba48956b0b5d08542119b3782b256b09daf694e20c8de3164ca020c541.js"
  }
}</script>

这是 JS 文件的完整 URL： 获取https://library.example.com/assets/application-ec9fb8976583666f9882e99ffe94f0391fc9ac4f1a32034d128201c87ac33ca3.js

请求标头

• ：权威：library.example.com
• ：方法：获取
• ：路径：/assets/applicationec9fb8976583666f9882e99ffe94f0391fc9ac4f1a32034d128201c87ac33ca3.js
• ：方案：https
• 接受：/
• 接受编码：gzip、deflate、br、zstd
• 接受语言：它
• 缓存控制：无缓存
• dnt：1
• 来源：https://www.example.com
• pragma：无缓存
• 优先级：u=1
• 推荐人：https://www.example.com/
• sec-ch-ua：“Google Chrome”；v =“129”，“Not = A？品牌”；v =“8”，“Chromium”；v =“129”
• sec-ch-ua-移动：？0
• sec-ch-ua-platform：“macOS”
• sec-fetch-dest：脚本
• 秒获取模式：cors
• sec-fetch-site：同一站点
• 用户代理：Mozilla/5.0（Macintosh；Intel Mac OS X 10_15_7）AppleWebKit/537.36（KHTML，如 Gecko）Chrome/129.0.0.0 Safari/537.36

响应标头

• 年龄：12
• 缓存控制：公共，最大年龄=14400
• cf-缓存状态：命中
• cf 射线： m8c589566aaca599b-MXP
• 内容编码： mgzip
• 内容类型：应用程序/javascript
• 日期： 2024 年 9 月 19 日，星期四 09:35:04 GMT
• etag：W/“66e18820-b8”
• 到期时间： 2024 年 9 月 19 日星期四 13:35:04 GMT
• 最后修改时间： 2024 年 9 月 11 日，星期三 12:08:00 GMT
• 服务器：cloudflare
• 变化：接受编码
• x-供电：cloud66

我已将其添加到library.example.com 上托管的Ruby on Rails 应用程序中。

/config/application.rb

config.middleware.insert_before 0, Rack::Cors do

      allow do
        origins 'https://www.example.com','https://example.com'
        resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
      end

end

但不起作用。

我希望开发控制台中不会出现错误，并且我必须能够访问 example.com/library 并使用所有 CSS 和 JS 加载从 library.example.com 提供的页面。

Answer 1

当请求的

origin

标头字符串不完全匹配时，rack::cors 会发生此行为，这就是服务器响应中缺少 access-control-allow-origin 标头的原因，从而导致 CORS 错误。

阅读上面的内容，前面似乎有三个代理。要找到有问题的代理，请逆向工作，让其在本地工作（编辑 /etc/hosts 文件），然后尝试在本地使用 cloud66，然后使用 render.com，然后添加 cloudflare。