Axios 报错及解决方法
Axios 是一个基于 Promise 的 HTTP 客户端库，可用于在浏览器和 Node.js 中发送 HTTP 请求。它提供了一种简单和直观的方式来进行网络传输，支持拦截请求和响应，以及转换请求和响应数据。然而，使用 Axios 进行网络请求时，有时会遇到报错的情况。本文将介绍一些常见的 Axios 报错，并提供解决方法。
1. 报错场景及示例
1.1. 跨域请求被拒绝
Axios 默认不允许跨域请求，当发送跨域请求时，浏览器会拒绝该请求，并报错 Access to XMLHttpRequest at ' from origin 'http://localhost:3000' has been blocked by CORS policy。
解决方法：使用代理服务器或设置服务器响应头。
1.1.1. 使用代理服务器
在本地开发环境中，可以通过配置代理服务器来绕过跨域限制。例如，使用 webpack-dev-server 可以配置代理服务器，将请求转发到目标服务器。
// webpack.config.js
module.exports = {
// ...
devServer: {
proxy: {
'/api': {
target: '
changeOrigin: true,
pathRewrite: {
'^/api': '',
},
},
},
},
};
使用上述配置后，发送请求时，将所有以 /api 开头的路径代理到 `
1.1.2. 设置服务器响应头
如果你有权限修改服务器代码，可以在服务器端设置响应头，允许跨域请求。
// server.js
const express = require('express');
const app = express();
app.use((req, res, next) => {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
next();
});
// ...
在上述代码中，设置 Access-Control-Allow-Origin 为 *，表示允许任意源的请求；设置 Access-Control-Allow-Methods 为允许的请求方法；设置 Access-Control-Allow-Headers 为允许的请求头。
1.2. 请求超时
当网络请求花费的时间超过预设的超时时间时，Axios 会报错 Error: timeout of xxxms exceeded。
解决方法：增加超时时间或检查网络连接。
1.2.1. 增加超时时间
可以通过设置 timeout 选项来增加超时时间。例如，将超时时间设置为 5000 毫秒：
axios.get(' { timeout: 5000 })
.then(response => {
// ...
})
.catch(error => {
// ...
});
1.2.2. 检查网络连接
如果请求超时问题经常发生，可能是网络连接不稳定引起的。可以通过检查网络连接质量、更换网络环境或与网络管理员联系来解决该问题。
1.3. 请求被取消
有时，我们需要在发送请求后取消该请求。当请求被取消时，Axios 会报错 Error: Request aborted。
解决方法：使用 CancelToken 进行请求取消。
const source = axios.CancelToken.source();
axios.get(' { cancelToken: source.token })
.then(response => {
// ...
})
.catch(error => {
if (axios.isCancel(error)) {
console.log('Request canceled', error.message);
} else {
console.log('Error', error.message);
}
});
// 取消请求
source.cancel('Operation canceled by the user.');
在上述代码中，使用 axios.CancelToken.source() 创建 CancelToken 对象，并将其传递给请求的 cancelToken 选项。然后，使用 source.cancel() 方法来取消请求。
2. 常见问题解答
2.1. 如何拦截请求和响应？
Axios 提供了拦截器，可以在发送请求和响应之前或之后执行一些操作。使用 interceptors 属性可以添加请求拦截器和响应拦截器。
