axios拦截器响应未定义

Question

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

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

@echo off
for /f "delims=" %%a in (file.txt) do (
  for %%b in (%%a) do (
    for /f "tokens=1,2 delims=:" %%c in ("%%b") do (
      echo %%c|findstr "code2 code3">nul && echo %%~d
    )
  )
)

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

Answer 1

由于浏览器在执行预检OPTION请求时收到了401未经授权的响应，因此您未收到您对Axios所做请求的回复，从而导致在网络错误中，您正在尝试执行此操作。

这与CORS的工作方式以及后端处理OPTION请求的方式有关。要了解后端服务器应如何处理预检请求，了解what is the motivation behind introducing preflight requests.

非常重要

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

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

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

无耻的自我推销，我发布了一个名为axios-middleware的简单Axios插件，它有助于在更大的应用程序中抽象使用Axios拦截器。它通过在重新发送请求之前再次进行身份验证来提供middleware that automatically handles unauthenticated requests的示例。

Answer 2

这不是最佳实践，但我可以通过这种方式解决

axios.interceptors.response.use(
        response => response,
      error => {
        if (typeof error.response === "undefined") {
          // do somthing
        } 
       return Promise.reject(error);
      }
    )

Answer 3

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

就我而言，为nginx 401响应添加Access-Control-Allow-Origin标头解决了问题

Answer 4

对于仍在努力解决此问题的人，请使用以下错误处理来更好地控制

if (error.response) {
  // Request made and server responded
  console.log(error.response.data);
  console.log(error.response.status);
  console.log(error.response.headers);
} else if (error.request) {
   // The request was made but no response was received
   console.log(error.request);
} else {
   // Something happened in setting up the request that triggered an Error
   console.log('Error', error.message);
}
return Promise.reject(error);