1.如果发送的请求都以 /abc 开头,那么我们就可以在proxy中进行服务器代理配置.这里以axios发请求为例
axios.get("/abc/def");axios.get("/abc/ghi");axios.post("/abc/jkm");
devServer: {host: 'localhost',port: 8080,//自定义open: true,proxy: {"/abc": {target: "http://XX.XX.XX.XX:8081",changeOrigin: true,ws: true,secure: false,},},},
"/abc":{} : 引号中代表监测的是以 /abc 开头的接口target : 代表监测到以 /abc 开头的接口后,把axios请求中前面的本地服务器地址改为后端接口地址,实际发送给后端的请求就是下方后一个请求
http://localhost:8080/abc/def --> http://XX.XX.XX.XX:8081/abc/defchangeOrigin : 是否跨域ws : 如果要代理 websockets,配置这个参数secure : 如果是https接口,需要配置这个参数(如果是http接口,也可以不写这个参数)pathRewrite :替换请求中匹配的内容。上方未使用此参数
2.代理多个接口( 即发送的请求不是都以 /abc 开头,例如下图)
axios.get("/zzz/one");axios.get("/xxx/two");
http://localhost:8080/zzz/one
http://localhost:8080/xxx/two
方法1:监测多个接口,可以在proxy中写多个配置:(适用于target不同的代理)
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,},},},
那么实际发送给后端的请求就是:
http://XX.XX.XX.XX:8082/zzz/one
http://XX.XX.XX.XX:8083/xxx/two
方法2:使用axios进行前设置(适用于target相同的代理)
// 一般在全局设置里引入,例如main.js,方便第二行的配置被每一个axios请求识别import axios from "axios";// 只要发送axios请求,就在请求前加入/api的开头,例如 /zzz/one -> /api/zzz/oneaxios.defaults.baseURL = "/api";
进行了上方的配置后,在本地发送的请求会变为
http://localhost:8080/api/zzz/one
http://localhost:8080/api/xxx/two
而后可以设置只监听 "/api" 的代理,不过要设置pathRewrite参数:
devServer: {proxy: {"/api": {target: "http://XX.XX.XX.XX:8084",changeOrigin: true,ws: true,pathRewrite: {"^/api": "",},},},},
pathRewrite :检查代理的请求中是否有 /api ,有的话把 /api 替换为冒号后面的内容,案例为替换成空字符串,也就是删去 /api 。(^是正则表达式的内容,意思是限定开头)
本地请求 http://localhost:8080/api/zzz/one ->
代理后请求 http://XX.XX.XX.XX:8084/api/zzz/one ->
设置pathRewrite后的请求 http://XX.XX.XX.XX:8084/zzz/one
所以代理完成后真正发送给后端的请求就是 http://XX.XX.XX.XX:8084/zzz/one
如果觉得《Vue配置文件中的devServer proxy配置方式详解》对你有帮助,请点赞、收藏,并留下你的观点哦!