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
|
标签:axios,Vue,http,跨域,devServer,代理,XX,abc,true From: https://www.cnblogs.com/houxianzhou/p/18399994