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

Question

总而言之，我正在构建一个服务器呈现的Express / React应用程序，并且我试图从客户端查询后端的某些数据。基本流程如下所示：

1. 用户导航到客户路径applications/:id
2. 已加载Application组件
3. 从GET组件生命周期方法Application
向服务器的API发出componentWillMount个请求
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（）。

     

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