React请求API数据时为何返回401 Unauthorized错误？

我之前处理过好几起SSR场景下的会话丢失问题，结合你描述的情况——浏览器直接访问API正常，但组件里发起请求就401，还有同类应用无此问题，给你几个针对性的排查方向：

1. 先搞清楚请求是在服务端还是客户端发起的 #

SSR模式下，componentWillMount会在服务端渲染阶段和客户端hydrate阶段各执行一次。如果是服务端发起的请求，默认不会携带客户端的Cookie，自然会触发401（因为浏览器直接访问是客户端带Cookie请求的）。

你可以在请求代码里加个日志判断环境：

console.log('请求发起环境:', typeof window === 'undefined' ? '服务端' : '客户端');

如果发现服务端也在发起请求，那需要手动把客户端的Cookie从Express的req对象里拿出来，传给Axios：

// 假设服务端渲染时把req作为props传给了组件
const axiosInstance = axios.create({
  withCredentials: true,
  headers: {
    Cookie: this.props.req?.headers.cookie // 仅在服务端时传递客户端Cookie
  }
});
axiosInstance.get(`/api/applications/${this.props.id}`);

2. 验证Axios和CORS的凭证配置是否匹配 #

你提到已经设置了withCredentials: true，但还要确保服务端的CORS配置允许携带凭证：

// Express的CORS配置，注意origin不能用*，要指定具体的客户端域名
app.use(cors({
  origin: process.env.YOUR_CLIENT_DOMAIN,
  credentials: true
}));

另外检查express-session的Cookie配置，尤其是sameSite和secure属性：

• 本地开发时，sameSite可以设为'lax'或者false，secure设为false
• 生产环境如果是HTTPS，sameSite设为'none'时必须搭配secure: true

3. 考虑换个请求时机：用componentDidMount替代componentWillMount #

componentDidMount只会在客户端执行，完全避开服务端发起请求的场景。如果你的SSR不需要在服务端预取这个接口的数据，直接把请求移到componentDidMount里，大概率能解决问题：

componentDidMount() {
  axios.get(`/api/applications/${this.props.id}`, { withCredentials: true })
    .then(res => {
      // 存入Redux的逻辑
    });
}

4. 对比正常应用的差异点，逐行排查配置 #

既然有一个同类应用没问题，那就把两个应用的核心配置拉出来对比：

• express-session的所有参数（secret、cookie相关配置）
• Passport的序列化/反序列化函数，以及策略的初始化代码
• Axios的全局拦截器（有没有修改请求头的逻辑）
• CORS配置的细节
• 服务端渲染时，组件接收的props是否有差异

5. 调试请求头和会话解析 #

• 在浏览器开发者工具里，查看组件发起的API请求的Request Headers，确认Cookie字段是否存在，且和直接访问API时的Cookie一致
• 在服务端的API路由里，打印req.headers.cookie和req.session，看看会话是否被正确解析：

  app.get('/api/applications/:id', (req, res) => {
    console.log('请求Cookie:', req.headers.cookie);
    console.log('当前会话:', req.session);
    // 后续业务逻辑
  });
  

如果req.session为空，说明会话中间件没有正确处理这个请求，可能是Cookie的域名/路径不匹配导致的。

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