React+Rails(Devise)登出接口出现CORS跨域错误求助

1. 更新Rails CORS配置 #

DELETE属于非简单请求，会触发浏览器OPTIONS预检请求，需要在Rails的CORS配置中明确允许该方法，并暴露Devise Token Auth所需的响应头。修改config/initializers/cors.rb文件：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3002' # 替换为你的React前端地址
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head], # 包含DELETE和OPTIONS方法
      expose: ['access-token', 'client', 'uid', 'expiry'] # 暴露认证相关响应头给前端
  end
end

修改完成后重启Rails服务器，让配置生效。

2. 修复前端fetch请求 #

你的登出请求缺少关键配置，同时可能存在Cookie键名错误：

• 添加credentials: 'include'：允许浏览器携带凭证（Cookie/认证头），否则跨域请求会被拦截
• 核对uid对应的Cookie键：Devise Token Auth默认将uid存储为同名Cookie，而非user_email

修改后的登出代码：

const logOut = async(event) => {
  event.preventDefault();
  const url = `${process.env.REACT_APP_API_URL}/auth/sign_out`;

  const requestOptions = {
    method: 'DELETE',
    credentials: 'include', // 必须添加，携带跨域凭证
    headers: {
      'Content-Type': 'application/json',
      'access-token': Cookies.get('access-token'),
      'client': Cookies.get('client'),
      'uid': Cookies.get('uid') // 更正为正确的Cookie键
    }
  };

  try {
    const res = await fetch(url, requestOptions);
    if (res.ok) {
      // 登出成功后清除本地认证Cookie
      Cookies.remove('access-token');
      Cookies.remove('client');
      Cookies.remove('uid');
      // 此处添加页面跳转等后续逻辑
    } else {
      console.error('登出失败:', await res.json());
    }
  } catch (err) {
    console.error('请求异常:', err);
  }
};

3. 验证预检请求 #

打开浏览器开发者工具的Network标签，点击登出按钮后查看OPTIONS请求状态：

• 若返回200，说明CORS配置生效；
• 若失败，检查Rails服务器日志，确认CORS中间件是否正确加载。

4. 核对Devise Token Auth后端配置 #

确保config/initializers/devise_token_auth.rb中允许跨域请求：

DeviseTokenAuth.setup do |config|
  config.enable_standard_devise_support = true
  config.default_headers = {
    'Access-Control-Allow-Origin' => 'http://localhost:3002',
    'Access-Control-Allow-Methods' => 'GET, POST, PUT, PATCH, DELETE, OPTIONS',
    'Access-Control-Allow-Headers' => 'Origin, Content-Type, Accept, Authorization, access-token, client, uid'
  }
end

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