在 xhr.js 上捕获 404，当调用 Axios GET 并且快递服务器发送 .json()

Question

在我的客户端 Vue.js 应用程序上，当使用无效的 API 令牌调用我的 express API 时，控制台给我一个 404 错误。

例如打电话 http://localhost:8081/confirmation/invalidToken 给，我

xhr.js?b50d:172 GET http://localhost:8081/confirmation/a 404 (Not Found)

当然有人可能会使用那个无效的 link，所以我想处理这些错误而不是在控制台上打印错误。

如果在我的快速服务器端，我会像这样发送响应：

return res.status(404);

然后控制台错误消失。编辑：然而，这似乎只是这种情况，因为请求尚未完成并且正在等待。一段时间后，控制台记录 "net::ERR_CONNECTION_RESET" 错误。

它只会在我发送这样的响应时出现：

return res.status(404).send({
  message: 'No valid link!',
  error,
});

或者这个：

return res.status(404).send({
  message: 'No valid link!',
  error,
});

在客户端捕获不适用于此问题。

public async sendConfirmation(token: string): Promise<any> {
  try {
    return axios.get(this.baseURL + '/confirmation/' + token);
  } catch (error) {
  // tslint:disable-next-line:no-console
    console.log(error.response);
  }
}



sendConfirmation(this.token)
 .then((res) => {
   // tslint:disable-next-line:no-console
   console.log(res);
   if (res.status === 404) {
     throw new Error("404");
   }
   this.data = res.data;
   if (res.status === 201) {
     this. messagetype = 1;
   } else if (res.status === 200) {
     this.messagetype = 2;
   }
})
.catch((err) => {
  this.messagetype = 0;
  // tslint:disable-next-line:no-console
  // console.log(err );
});

有谁知道捕获控制台错误的方法，而不必删除服务器结果中的自定义消息？

Answer 1

我在具有变量环境的 webpack 项目中的 heroku 中遇到了同样的错误，我将 .env 文件的路径设置为本地路径，如 c:/project/.env，所以服务器的变量总是 return未定义，更改相对路径修复了错误：

    if (process.env.REACT_APP_ENV === "development") {
  require("dotenv").config({
    path: ".env.development",
  });
}

还要检查 .env 文件，确保没有引号：

SERVER_URI=https://yourApp.com

而不是这个：

SERVER_URI="https://yourApp.com"

您稍后必须在 webpackconfig 中对其进行字符串化。

这可能会对某人有所帮助或给他一个提示。

Answer 2

嗯，这是一种浏览器行为，显示了错误。某些响应代码会在某些浏览器中抛出这些控制台消息。

在项目中似乎没有办法阻止这种情况。

在 xhr.js 上捕获 404，当调用 Axios GET 并且快递服务器发送 .json()

Catch 404 on xhr.js, when Axios GET is called and express server sends .json()

xmlhttprequest

node.js

http-status-code-404

express

axios