vue中proxy代理资料整理

每次遇到跨域问题都要到网上查一查，每次搜索到的资料都不通，今天我把对我有用的资料整理在一起，做个笔记，方便之后查阅

前端代理是为了解决前端跨域问题，但是服务器与服务器之间不存在跨域问题，所以前端代理的原理就是通过前端本地服务器向目标服务器发送请求，目标服务器返回数据给本地服务器，本地服务器再把数据返回给前端

vue.config.js中配置

module.exports = {
  devServer: {
    proxy: {
      '/api':{
        target:'http://192.168.0.1', //目标地址，实际请求的服务器地址，代理服务器会向该服务器发送请求
        changeOrigin: true,
        secure: false, // target默认不接受运行在https上且使用了无效证书的后端服务器，如果想接受，设置为false
        pathRewrite:{
          '^/api':'' //接口重写，将接口中的‘/api’字符串去掉
        }
      }
    }
  }
}

上边的‘/api’实际上是你给接口统一配置的前缀名，代理服务器看到这个字段就认为是需要代理的接口，他就会重写接口名，并向target发送请求
例如：

getDolist(params) {
    const url = 'api/aaa/bbb/ccc/ddd'
    return http.get(url, params)
}

接口需要请求的是http://192.168.0.1/aaa/bbb/ccc/ddd,但是实际上浏览器显示的请求地址是http://localhost:8080/api/aaa/bbb/ccc/ddd,本地服务器检测到‘/api’字段，发现这个请求需要代理，所以他重写的接口名，去掉了‘/api’字段，并向目标服务器target发送了请求http://192.168.0.1/aaa/bbb/ccc/ddd，目标服务器将接口返回给代理服务器，代理服务器再将数据返回给前端