从React请求API数据时，为什么会收到401未经授权的错误？

Question

长话短说，我正在构建服务器渲染的Express / React应用程序，并且尝试从客户端向后端查询一些数据。 基本流程如下所示：

1. 用户导航到客户端路径applications/:id
2. Application组件已加载
3. 从Application组件生命周期方法componentWillMount向服务器的API发出GET请求
4. 来自响应的数据已添加到Redux

问题在于响应（步骤4）是401（未授权）。 这不是登录或不登录的问题。 存在有效的会话，并且如果我从浏览器导航到API路由，则可以看到预期的响应。 作为补充说明，此应用程序类似于另一个应用程序（在几乎相关的方面），没有此问题。

尝试的故障排除步骤：

1. 验证正确的模块和版本
2. 验证正确的API请求路径和配置（使用Axios和withCredentials配置参数）
3. 经过验证的服务器路由和身份验证
4. 经过验证的PassportJS配置
5. 验证请求会话在身份验证过程中丢失了

Answer 1

事实证明，问题在于我是从componentWillMount React生命周期方法发出API请求的。 换句话说，由于相关组件已在服务器上呈现并且尚未完成，因此API调用也在服务器端进行（该组件尚未挂载），这意味着该cookie无法用于API请求。 因此，出现401未经授权错误。

首先阅读文档会为我省去很多麻烦：

componentWillMount（）...

避免在此方法中引入任何副作用或订阅。 对于这些用例，请改用componentDidMount（）。

这是在服务器渲染上调用的唯一生命周期挂钩。