1、作用：
Vue官方文档的解释是：
如果你的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。这个问题可以通过
vue.config.js中的devServer.proxy选项来配置。
通俗的说，就是为了解决跨域问题。
2、用法：
本篇都以axios发请求为例,样例如下：
|-------|-----------------------------------------------------------------------------------------|
| 1 2 3 | axios.get(``"/abc/def"``); axios.get(``"/abc/ghi"``); axios.post(``"/abc/jkm"``); |
axios发送的请求是本地的服务器地址拼接上发送的请求，如 http://xxx:8080/abc/def
2.1 指定请求开头配置
如果发送的请求都以 /abc 开头，代理配置：
|----------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 | devServer: { ``proxy: { ``"/abc"``: { ``target: ``"http://XX.XX.XX.XX:8081"``, ``changeOrigin: ``true``, ``ws: ``true``, ``secure: ``false``, ``}, ``} }, |
- "/abc":{} : 引号中代表，本代理配置，会检测以 /abc 开头的访问
- target : 代表检测到以 /abc 开头的接口后，将请求中端口、地址，修改为后端接口地址，从而避免发生跨域问题
- changeOrigin : 是否修改数据包中host参数，默认为true
- ws : 是否代理 websockets
- 该代理请求为：
http://localhost:8080/abc/def ---> http://XX.XX.XX.XX:8081/abc/def
2.2 代理多个接口
请求示例：
|---------|---------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 | // http://localhost:8080/zzz/one axios.get(``"/zzz/one"``); // http://localhost:8080/xxx/two axios.get(``"/xxx/two"``); |
代理多接口方式1
监测多个接口，可以在proxy中写多个配置
|----------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 | devServer: { ``proxy: { ``"/zzz"``: { ``target: ``"http://XX.XX.XX.XX:8082"``, ``changeOrigin: ``true``, ``ws: ``true``, ``}, ``"/xxx"``: { ``target: ``"http://XX.XX.XX.XX:8083"``, ``changeOrigin: ``true``, ``ws: ``true``, ``}, ``}, }, |
代理多接口方式2
配置axios
|---------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 | // 只要发送axios请求，就在请求前加入/api的开头，例如 /zzz/one -> /api/zzz/one axios.defaults.baseURL = ``"/api"``; /* 进行了上方的配置后，在本地发送的请求会变为 http://localhost:8080/api/zzz/one http://localhost:8080/api/xxx/two */ |
配置代理
|-------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 | devServer: { ``proxy: { ``"/api"``: { ``target: ``"http://XX.XX.XX.XX:8084"``, ``changeOrigin: ``true``, ``ws: ``true``, ``pathRewrite: { ``"^/api"``: ``""``, ``}, ``}, ``}, }, //pathRewrite ：检查代理的请求中是否有 /api ，有的话把 /api 替换为冒号后面的内容，案例为替换成空字符串，也就是删去 /api 。（^是正则表达式的内容，意思是限定开头） |
3、常见参数
|----------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 1 2 3 4 5 6 7 8 9 10 11 12 | target：``"xxx"``, ``// 要使用url模块解析的url字符串 forward：``"xxx"``, ``// 要使用url模块解析的url字符串 agent：{}, ``// 要传递给http(s).request的对象 ssl：{}, ``// 要传递给https.createServer()的对象 ws：``true``/``false``, ``// 是否代理websockets xfwd：``true``/``false``, ``// 添加x-forward标头 secure：``true``/``false``, ``// 是否验证SSL Certs toProxy：``true``/``false``, ``// 传递绝对URL作为路径（对代理代理很有用） prependPath：``true``/``false``, ``// 默认值:true 指定是否要将目标的路径添加到代理路径 ignorePath：``true``/``false``, ``// 默认值:false 指定是否要忽略传入请求的代理路径 localAddress：``"xxx"``, ``// 要为传出连接绑定的本地接口字符串 changeOrigin：``true``/``false``, ``// 默认值:false 将主机标头的原点更改为目标URL |