Node.js登录后重定向至React应用的CORS错误问题求助

问题根源 #

通过AJAX（如RTK Query/fetch）发起登录请求时，服务器返回302重定向后，浏览器会自动跟随重定向发起新请求到目标URL（http://localhost:3000/app）。由于原AJAX请求设置了credentials: 'include'，浏览器会将Cookie附加到重定向请求中，但前端开发服务器（如React的dev server）默认CORS配置可能返回Access-Control-Allow-Origin: *，这与credentials: include规则冲突，触发CORS错误。

而Google OAuth的跳转是浏览器顶级导航（通过window.location.href），不属于AJAX请求范畴，因此不会触发CORS检查，所以能正常工作。

解决方案 #

方案1：服务器区分请求类型分别处理（推荐） #

在服务器端判断请求是否为AJAX请求，对AJAX请求返回JSON响应告知前端跳转，对浏览器直接请求（如OAuth）返回302重定向。

修改createSendToken函数：

const createSendToken = (
  user,
  statusCode,
  res,
  remember = false,
  loginType = 'normal'
) => {
  // ... 生成token和Cookie的原有逻辑

  // 判断是否为AJAX请求：检查Accept头或X-Requested-With标识
  const isAjaxRequest = req.accepts('json') || req.headers['x-requested-with'] === 'XMLHttpRequest';

  if (isAjaxRequest) {
    // 对AJAX请求返回JSON，告知前端登录成功及跳转地址
    res.status(statusCode).json({
      status: 'success',
      redirectUrl: `${rootURL}${appURL}`
    });
  } else {
    // 对浏览器直接请求返回重定向
    res.redirect(`${rootURL}${appURL}`);
  }
};

前端RTK Query中处理响应并主动跳转：

// authApi.js
login: builder.mutation({
  query: credentials => {
    return {
      url: '/users/login',
      method: 'POST',
      body: credentials,
    };
  },
  transformResponse: response => {
    if (response.redirectUrl) {
      window.location.href = response.redirectUrl;
      return null;
    }
    return response;
  },
}),

方案2：修改前端开发服务器CORS配置（临时调试用） #

若坚持让服务器返回302重定向给AJAX请求，需修改React dev server的CORS配置，使其返回具体Origin并允许Credentials：

1. 安装依赖：

npm install http-proxy-middleware --save-dev

2. 在src目录创建setupProxy.js：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  // 代理API请求到后端
  app.use('/api', createProxyMiddleware({
    target: 'http://localhost:3001',
    changeOrigin: true,
    credentials: true,
  }));

  // 配置静态资源的CORS头
  app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.setHeader('Access-Control-Allow-Credentials', 'true');
    next();
  });
};

3. 修改RTK Query的baseUrl为相对路径：

baseQuery: fetchBaseQuery({
  baseUrl: '/api', // 通过代理转发到3001
  credentials: 'include',
}),

方案3：移除AJAX请求的credentials: include（不推荐） #

若登录后无需通过Cookie传递token（如用localStorage存储），可移除该配置，但这不符合JWT Cookie的安全实践，仅适用于测试场景。

关键说明 #

• AJAX请求的重定向逻辑与浏览器顶级导航完全不同，浏览器会对AJAX的重定向请求进行严格CORS检查，而顶级导航不受CORS限制。
• 带credentials: include的请求，服务器必须返回具体的Origin（不能是*），且Access-Control-Allow-Credentials设为true。

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