React开发中登录后页面刷新Ajax保持登录但Axios失效问题咨询

这个差异不属于jQuery Ajax与Axios的预期原生差异，完全是配置和用法疏漏导致的，和两个请求库本身的功能定位无关。

导致该问题的核心原因有两个：

• 身份凭证携带配置的默认值不同
  jQuery的$.ajax在发送同域请求时默认会自动携带当前域名下的Cookie，而Axios默认的withCredentials配置项为false，不会主动在请求中携带Cookie。登录态一般是存储在Cookie中的，Axios请求/retrieveUser接口时没有携带身份Cookie，后端无法识别用户身份，自然返回未登录的结果，就表现为刷新后登录态丢失。

• 响应数据的取值逻辑不同
  $.ajax的success回调入参直接是接口返回的响应体，你可以直接取res.id做判断；但Axios的then回调入参是经过封装的完整响应对象，实际接口返回的数据存在res.data字段下。你现有代码直接判断res.id必然返回undefined，永远不会触发loginCheck逻辑，这也是登录态看起来失效的核心原因。

修复方案 #

调整Axios请求的配置和取值逻辑即可，修改后代码如下：

componentDidMount() {
  axios({
    method: 'GET',
    url: '/retrieveUser',
    withCredentials: true // 新增配置，允许携带Cookie
  })
  .then(res => {
    // 从res.data中取实际接口返回的内容
    if (res.data.id) this.loginCheck(res.data);
  })
}

如果项目中多处请求都需要携带Cookie，可以直接设置全局默认配置，不用每个请求单独加：

axios.defaults.withCredentials = true

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