Rails使用rack-cors配置单域名白名单后POST请求失败

嘿，我来帮你搞定这个跨域POST的问题！你遇到的情况其实是Rails里跨域请求的典型坑——rack-cors的白名单配置和Rails默认的CSRF防护撞在一起了，咱们一步步拆解解决：

第一步：先确认rack-cors的配置是否正确 #

首先得保证你的cors初始化文件（config/initializers/cors.rb）配置到位，很多时候白名单不生效都是因为这里写错了：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'https://reflective-basket.surge.sh' # 严格匹配你的前端域名
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head], # 必须包含POST和OPTIONS
      credentials: true # 如果你的请求需要带Cookie/认证信息，一定要加这个
  end
end

这里要注意几个关键点：

• insert_before 0：确保CORS中间件在所有其他中间件之前运行，避免被其他拦截逻辑抢先处理
• methods必须包含POST和OPTIONS：跨域POST请求会先发送OPTIONS预请求，这个必须被允许
• origins要完全匹配前端域名，别漏了https://或者写错后缀

配置完后一定要重启Rails服务器，因为initializer的修改需要重启才会生效！

第二步：处理Rails的CSRF防护问题 #

这才是你遇到的核心问题——Rails默认的protect_from_forgery会拦截没有携带CSRF token的跨域POST请求，这是Rails的安全机制。你有两种选择：

选项1：针对API控制器关闭指定action的CSRF验证 #

如果你的这个POST请求是发给API接口的，不需要会话Cookie，那可以在对应的控制器里跳过CSRF验证：

class YourController < ApplicationController
  # 只跳过你需要POST的那个action，尽量不要全局跳过
  skip_before_action :verify_authenticity_token, only: [:create]
end

这种方式最简单，但要注意：只针对确实不需要CSRF防护的接口使用，比如纯后端API，不要随便全局关闭，避免安全风险。

选项2：前端携带CSRF token（更安全，适合需要Cookie的场景） #

如果你的请求需要携带会话Cookie（比如用户已登录的场景），那最好保留CSRF防护，让前端在请求里带上Rails生成的CSRF token：

1. 首先确保你的Rails页面里有CSRF meta标签（默认Rails模板都会有）：

   <meta name="csrf-token" content="<%= form_authenticity_token %>">
   

2. 前端发送请求时，从meta标签里获取token，放到请求头里：

   const csrfToken = document.querySelector('meta[name="csrf-token"]').content;
   fetch('https://你的Rails应用地址/接口路径', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
       'X-CSRF-Token': csrfToken
     },
     credentials: 'include', // 带上Cookie
     body: JSON.stringify(你的请求数据)
   });
   

最后排查几个常见坑 #

• 检查浏览器Network面板：看看OPTIONS预请求是不是返回200，如果是403或者其他错误，说明rack-cors配置有问题
• 确认gem已经安装：运行bundle show rack-cors，如果找不到说明没装，要先bundle add rack-cors再安装
• 域名拼写：别把前端域名写错了，比如多打了个斜杠或者少了https

按照上面的步骤来，你的跨域POST请求应该就能正常通过啦！

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