《axios代理的原理》
在开发中，我们经常遇到跨域问题或者需要对请求进行一些特殊处理时，axios代理是一个很好的解决方案。它能够将前端发送给后端的请求先转发到一个中间服务器（即代理服务器），由这个中间服务器再去向目标服务器发起请求并获取数据，然后将数据返回给前端。这样可以解决跨域等难题，并且方便对请求和响应进行统一处理。
一、使用Node.js搭建简易代理
这是实现axios代理的一种思路。安装express和http - proxy - middleware这两个npm包。
```javascript
// 安装依赖
npm install express http-proxy-middleware --save
// 创建server.js文件
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/api', createProxyMiddleware({
target: 'https://example.com', // 目标服务器地址
changeOrigin: true, // 改变源
pathRewrite: {
'^/api': '' // 重写路径，去掉/api前缀
}
}));
app.listen(3000, () => {
console.log('proxy server is running on port 3000');
});
``
在这个例子中，当前端向发送请求时，该请求会被代理到https://example.com对应的接口，并且会自动去掉请求路径中的/api前缀。同时通过设置changeOrigin`为true，可以解决跨域问题。
二、配置webpack devServer代理
如果是在开发环境下使用webpack构建项目，可以通过配置devServer来实现代理。
javascript
// webpack.config.js
module.exports = {
// 其他配置...
devServer: {
proxy: {
'/api': {
target: 'https://example.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
};
这种方式不需要额外启动一个代理服务器，当运行npm run serve启动开发服务器时，代理功能就生效了。
三、直接在axios中配置代理（相对间接）
虽然不能像前面两种方法那样真正意义上作为代理服务器，但可以在axios实例创建时指定基础url等信息，在一定程度上模拟代理的效果。
```javascript
import axios from 'axios';
const instance = axios.create({
baseURL: 'https://example.com/api' // 指定基础url
});
export default instance;
```
在组件或其他地方使用这个axios实例发送请求时，就不需要再单独写完整的url了，并且可以在此基础上添加等功能对请求和响应做更多处理。
