为什么我在从 React 请求 API 数据时收到 401 Unauthorized 错误？

Question

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

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

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

尝试的故障排除步骤：

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

Answer 1

事实证明，问题在于我从 componentWillMount React 生命周期方法发出 API 请求。换句话说，由于有问题的组件正在服务器上呈现并且尚未完成，因此 API 调用也是从服务器端进行的（组件尚未安装），这意味着 cookie 不可用于API 请求。因此出现 401 Unauthorized 错误。

先阅读the docs会省去不少麻烦：

componentWillMount() ...

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

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