Vue proxy配置

解决前端跨域问题 proxy配置

同源就是指 协议、域名、端口 都要相同，其中任何一个不同都会出现跨域

参考文章
【1】https://blog.csdn.net/tttttrrrhh/article/details/127685318
【2】https://blog.csdn.net/X_W123/article/details/120369610?spm=1001.2014.3001.5506
^ 表示匹配字符的开始位置

假如我现在想请求后端的 一个接口 例如：http://www.aaabbbccc.com/login ，这样我们应该怎样配置代理服务器呢？

操作：

// vue.config.js
  devServer: {
    
      //开启代理服务器
    proxy:{
    
    
      "/api": {
    
      // /api是自行设置的请求前缀，按照这个来匹配请求，有这个字段的请求，就会走到代理来。
          target: "http://www.aaabbbccc.com", // 需要代理的域名，目标域名，会替换掉匹配字段之前的路径
           ws: false, // 是否启用websockets
          changeOrigin: true, //是否跨域
          pathRewrite: {
    
      //重写匹配的字段，如果不需要放在请求路径上，可以重写为""
              "^/api": ""
          }
      },
   
  },
  }

以上配置中，我配置了一个 /api，只有包含这个请求的路径才会走代理，例如：

http://localhost:8080/api/login //这个就可以走代理
http://localhost:8080/login //这个就不行

转换步骤

此时我发送的请求就是：

http://localhost:8080/api/login
http://localhost:8080/api/getlist
http://localhost:8080/api/user/hello

遇到 包含”/api“ 开始起效

通过代理的 target 属性加工之后就是 ：

http://www.aaabbbccc.com/api/login
http://www.aaabbbccc.com/api/getlist
http://www.aaabbbccc.com/api/getlist

在通过 pathRewrite属性 将 /api 替换为空 为：

http://www.aaabbbccc.com/login
http://www.aaabbbccc.com/getlist
http://www.aaabbbccc.com/user/hello

图解