axios无法加载响应数据：no data found for resource with given identifier

Posted 2023-03-31 晨起拾光

美好的、令人遐想的日落黄昏里，出现了诡异的bug！

老师上课的时候，不好好听听，不仔细看！那么花了那么多时间找bug问题~翻了好多方案，还未解决，然后遇到了我，这个大冤种就是你（也包括我*~*）！！！

 猜想了好多种方案，其中一度被pass的解决方案既然是原因！！！

原因：前后端分离的跨域问题！！！

1、前提：你得知道，你的后端部分是否写正确了

我用postman测试了后端controller，能查询出数据库的信息，说明后端没问题

2、 改前端请求的接口路径（我的是单体项目，后端端口是80，不写端口号还是会错，于是改了）

 3、还是惊现了诡异的bug！

4、如何解决跨域问题？

（一）后端解决方案

在对应的controller上增加注解 @CrossOrigin，这也是最简单的方案！

（二）【针对前后端分离的项目的】前端解决方案，看图。

没有 proxyTable，自己添上去！！！！

3、再次重新运行项目（最好是重新打包运行）

刷新页面，叮当~~~~，这不就出来了嘛

4、如果认认真真、仔仔细细都检查了，还不对，那么快跑！换下一个博主！！！

 哈哈~

[注：如果页面让您有不舒服的话，请多多包含人与人之间的参差，小菜选手一枚，如有说的不对的地方，请指正。/ 抱拳/ 抱拳]

 

 

无法捕获并记录来自 axios 请求的错误响应

【中文标题】无法捕获并记录来自 axios 请求的错误响应

【英文标题】：Unable to catch and log the Error response from an axios request

【发布时间】：2017-12-02 01:05:06

【问题描述】：

我的 react 应用程序中有一个 axios 请求，为此我正在关注 axios npm docs.

这是我的 axios 请求

 axios.post(helper.getLoginApi(), data)
        .then((response) => 
            console.log(response);

            this.props.history.push(from.pathname)
        )
        .catch((error)=> 
            console.log(error);
        )

我能够成功记录成功请求的数据。但是，当我故意产生错误并尝试对其进行 console.log 时，我没有得到记录的结果，而是看到了

POST http://localhost:3000/login 401（未经授权） :3000/登录:1 错误：请求失败，状态码为 401 login.js:66

在 createError (createError.js:16)

安顿下来 (settle.js:18)

在 XMLHttpRequest.handleLoad (xhr.js:77)

但是，当我转到 Chrome 控制台中的网络选项卡时，我可以看到以下响应返回。

提前感谢您的帮助。

【问题讨论】：

您是否尝试过将您的 axios 包装到 try catch(e) 语句中？你试过检查then里面的response.status吗？只是一些想法 - 我不知道为什么它不起作用

@lumio，正如我所说，在 .then 中，我能够成功登录 response.data 但不能登录 .catch 块

即使我自己使用 axios，我也不确定当状态不是 2xx 时 axios 是否总是失败。当response.status 不是 200 时，您是否尝试在 then 中抛出错误？

我没有尝试过，一旦我尝试了@ShubhamKhatri 发布的答案并且如果它不起作用，我会这样做

【参考方案1】：

来自 Github Docs。 axios 请求的响应看起来像

  // `data` is the response that was provided by the server
  data: ,

  // `status` is the HTTP status code from the server response
  status: 200,

  // `statusText` is the HTTP status message from the server response
  statusText: 'OK',

  // `headers` the headers that the server responded with
  // All header names are lower cased
  headers: ,

  // `config` is the config that was provided to `axios` for the request
  config: ,

  // `request` is the request that generated this response
  // It is the last ClientRequest instance in node.js (in redirects)
  // and an XMLHttpRequest instance the browser
  request: 

所以本质上catch(error => )实际上只是catch(response => )

因此您可以登录error.response.data，您应该能够看到您的回复消息。

当您登录console.log(error) 时，您看到的是string 由error 对象上的toString 方法返回。

根据同一文档上的错误处理部分，您可以像这样捕获错误响应

axios.post(helper.getLoginApi(), data)
        .then((response) => 
            console.log(response);

            this.props.history.push(from.pathname)
        )
        .catch((error)=> 
            if (error.response) 
              // The request was made and the server responded with a status code
              // that falls out of the range of 2xx
              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
              // `error.request` is an instance of XMLHttpRequest in the browser and an instance of
              // http.ClientRequest in node.js
              console.log(error.request);
             else 
              // Something happened in setting up the request that triggered an Error
              console.log('Error', error.message);
            
        )