React+Rails API部署后CORS Missing Allow Origin报错排查

我的应用后端采用Ruby on Rails框架、前端采用React框架，本地环境测试GET、POST请求均运行正常；但将Rails API部署至Heroku、React前端部署至Vercel后，出现CORS相关报错：

在浏览器中启用CORS Everywhere插件后，请求可以正常响应：

我希望正确配置CORS规则，避免依赖浏览器插件即可正常发起请求。

相关代码 #

前端GET请求示例 #

useEffect(() => {
  const fetchMeals = async () => {
    //const response = await fetch('https://movieserp-default-rtdb.firebaseio.com/meals.json');
    const response = await fetch("https://rorletsorder.herokuapp.com/meals", {
      method: 'GET',
    });

    if (!response.ok) {
      throw new Error("something went wrong");
    }

后端CORS配置（cors.rb） #

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  
  #allow do
  #  origins 'localhost:3005', '127.0.0.1:3005'
  #  resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
  #end
  allow do
    origins 'https://reactletsorder.vercel.app/'
    resource '*', headers: :any, methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end

end

当前部署配置中已经添加了前端Vercel域名作为允许的跨域源，但部署后仍然触发CORS报错，需要确认前后端需要做哪些调整，才能正常处理GET、POST请求，不触发CORS告警。

核心问题是你origins配置里多了末尾的斜杠/：Rack::Cors做源匹配时不会自动处理路径后缀，浏览器发起跨域请求时自动携带的Origin头值为https://reactletsorder.vercel.app，末尾没有斜杠，导致规则匹配失败，服务端不会返回合法的CORS响应头，浏览器就会拦截请求。你用CORS插件能正常访问，就是因为插件自动给响应补了CORS头，绕过了浏览器的校验。

按以下步骤调整即可解决问题：

• 修改config/initializers/cors.rb的源配置，去掉域名末尾的斜杠，同时建议保留本地开发源方便后续调试，修改后代码如下：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'localhost:3005', '127.0.0.1:3005', 'https://reactletsorder.vercel.app'
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      expose: ['Authorization']
  end
end

• 提交代码后重新推送到Heroku触发部署，确保新配置生效。如果是Rails 7及以上版本，顺手检查config/application.rb里没有重复的CORS配置覆盖初始化文件的规则。
• 部署完成后可以用curl快速校验配置是否正确，执行以下命令：

curl -I -H "Origin: https://reactletsorder.vercel.app" https://rorletsorder.herokuapp.com/meals

如果返回的响应头里包含Access-Control-Allow-Origin: https://reactletsorder.vercel.app，就说明配置已经正常工作。

• 前端现有fetch代码不需要做任何修改，当前写法符合CORS简单请求规则，配置生效后直接访问即可正常发起请求。

不要为了省事把origins设置为*匹配所有源，会带来明确的跨域安全风险，只添加你实际信任的业务域名即可。

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