重定向时未发送Cookie：React+Express+Spotify授权场景问题

我之前也碰到过几乎一模一样的跨域Cookie问题，结合你的场景，咱们一步步来排查和解决：

你的场景是典型的跨域身份认证Cookie问题：react.com和api.com是完全独立的域名，浏览器的同源策略会限制Cookie的跨域传递，尤其是在Spotify授权回调的重定向流程里——api.com设置完Cookie后，前端react.com的请求如果没做正确配置，浏览器会默认拦截这个跨域Cookie的发送。

1. 后端Express/Passport的Cookie配置调整 #

首先要确保api.com在设置Cookie时，带上适配跨域场景的关键属性：

• 必须设置SameSite: 'None'：跨域场景下，现代浏览器会默认限制Cookie传递，显式设置这个值才能允许跨域携带
• 搭配Secure: true：SameSite: None必须和Secure属性一起使用，这意味着你的服务必须走HTTPS（开发环境可以用ngrok或者本地HTTPS工具模拟）
• 无需设置Domain属性：因为react.com和api.com是不同主域，设置Domain无法实现跨域共享，保持默认的api.com域名即可

在Passport的会话配置里可以这样写：

app.use(session({
  secret: 'your-session-secret',
  resave: false,
  saveUninitialized: false,
  cookie: {
    secure: process.env.NODE_ENV === 'production', // 生产环境强制开启
    sameSite: process.env.NODE_ENV === 'production' ? 'None' : 'Lax', // 开发环境可临时用Lax
    maxAge: 24 * 60 * 60 * 1000,
    domain: 'api.com' // 明确指定Cookie所属域名
  }
}));

2. 前端React的请求配置 #

前端所有向api.com发起的请求（包括代理转发的请求），都要明确带上credentials: 'include'，告诉浏览器允许跨域携带Cookie：

• 如果用Axios：

// 全局配置
axios.defaults.withCredentials = true;

// 或者单个请求单独设置
axios.get('/api/auth/spotify/callback', { withCredentials: true });

• 如果用Fetch：

fetch('/api/auth/spotify/callback', {
  credentials: 'include'
});

3. 代理配置的关键调整 #

如果你用的是React项目的代理（比如create-react-app的内置代理，或者http-proxy-middleware），必须确保代理允许传递Credentials：
用http-proxy-middleware的配置示例：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://api.com',
      changeOrigin: true,
      credentials: true, // 这个开关必须打开，否则代理会丢弃Cookie信息
      pathRewrite: { '^/api': '' }
    })
  );
};

注意：create-react-app的内置代理默认支持Credentials，但自定义代理时一定要显式设置这个属性。

4. 浏览器端验证步骤 #

• 打开开发者工具的Application面板，查看Cookies -> api.com下是否存在目标Cookie，且SameSite为None、Secure属性已勾选
• 在Network面板中，检查前端发送到api.com的请求，确认Request Headers里包含Cookie字段

• 开发环境下，如果用http://localhost:3000（React）和http://localhost:5000（Express），属于同一域名不同端口，同源策略允许Cookie传递，但仍需确保credentials: include和后端Cookie属性配置正确
• Spotify的回调URL必须指向api.com的地址（比如https://api.com/auth/spotify/callback），不能是react.com——因为Spotify会直接回调到该地址完成授权，再由api.com设置Cookie后重定向回前端

这样调整后，应该就能解决重定向过程中Cookie未发送的问题了，我当时就是靠这几个点搞定的！

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