axios拦截器响应未定义

Question

我试图在他们获得401后注销我的用户.我正在使用axios从api返回数据

我环顾四周,找到了相同的axios.interceptors.response

  axios.interceptors.response.use(
    response => response,
  error => {
    const {status} = error.response;
    if (status === 401 ) {
      store.dispatch('snackBar', snackbarObj)
    } 
   return Promise.reject(error);
  }
)

看来我的错误.回复是未定义的.我不确定有什么问题？有任何想法吗？

Answer 1

您没有从Axios的请求中获得响应,因为浏览器在执行预检OPTION请求时收到401未经授权的响应,导致您尝试执行的请求出现网络错误.

这与CORS的工作方式以及后端处理OPTION请求的方式有关.要了解后端服务器应如何处理预检请求,了解引入预检请求的动机是很重要的.

后端服务器不应检查对OPTION请求的身份验证,它应验证是否正在向接受跨域请求的端点发出请求,如果有,则返回成功代码.

然后,浏览器将自动继续执行最初预期的请求.

这样,如果不再对用户进行身份验证,Axios拦截器将收到401错误代码.

无耻的自我推销,我发布了一个名为axios-middleware的简单Axios插件,它有助于在更大的应用程序中抽象使用Axios拦截器.它提供了一个中间件示例,通过在重新发送请求之前尝试再次进行身份验证来自动处理未经身份验证的请求.

Answer 2

如果预检OPTION请求成功结束，响应对象也将是未定义的，但下一个响应GET/POST不包含Access-Control-Allow-Originhttp-header。

在我的情况下，Access-Control-Allow-Origin为 nginx 401 响应添加标头解决了问题