vue配置文件配置（Vue配置文件中的proxy配置）

1. 这里以axios发请求为例

axios.get("/abc/def"); axios.get("/abc/ghi"); axios.post("/abc/jkm");

axios发送的请求是本地的服务器地址拼接上发送的请求              ，如 http://localhost:8080/abc/def

2. 如果发送的请求都以 /abc 开头  
 
  
 
  
 
  
 
  
 
  
 
  
 
 ，那么我们就可以在proxy中进行服务器代理配置
  
  
  
  
  
  
  
。

devServer: { 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/def

changeOrigin : 是否跨域 ws : 如果要代理 websockets  
  
  
  
  
  
  
 ，配置这个参数 secure : 如果是https接口
 


 


 


 


 


 


 


，需要配置这个参数（如果是http接口
 
 
 
 
 
 
 ，也可以不写这个参数） pathRewrite ：替换请求中匹配的内容 
  
  
  
  
  
  
 。在3的方法2中详细解释用法   
   
   
   
   
   
   
 ，上方未使用此参数

3. 代理多个接口

axios.get("/zzz/one"); axios.get("/xxx/two");

http://localhost:8080/zzz/one

http://localhost:8080/xxx/two

方法1：监测多个接口
 

 

 

 

 

 

 

，可以在proxy中写多个配置：（适用于target不同的代理

 

 

 

 

 

 

 ，相同也可以用这个方法               ，就是会麻烦一点
 
 

 
 

 
 

 
 

 
 

 
 

 
 

，对于相同的target方法2会比较方便） 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/one axios.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 啦
 
 
 
 
 
 
 
。

（1.统一给请求添加/api方便监测代理 2.统一删去/api发送正确的请求）

注意：小伙伴们可能会看到浏览器中右键检查打开的控制台中
 
 
 
 
 
 
 ，网络->标头->常规   
   
   
   
   
   
   
 ，中的请求网址显示的还是 http://XX.XX.XX.XX:8084/api/zzz/one   
   
   
   
   
   
   
 。这是因为浏览器的同源策略
 

 

 

 

 

 

 

，经过代理设置的请求发送给后端已经变成 http://XX.XX.XX.XX:8084/zzz/one 没有/api 的形式了

 

 

 

 

 

 

 ，不用被浏览器显示的请求网址干扰 

 

 

 

 

 

 

 。如果实在不想看到浏览器的请求网址中有api               ，可以采用方法1

 

 

 

 

 

 

 
。