vue proxy代理

前言

本地和后端联调，本地的localhost:8080和后端服务地址触发了同源策略，会产生跨域。

原理

浏览器是禁止跨域的，但是服务端不禁止

应用

//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
  proxy: {
      '/api': {
          target: 'http://baidu.com',  // 后台接口域名
          ws: true,        //如果要代理 websockets，配置这个参数
          secure: false,  // 如果是https接口，需要配置这个参数
          changeOrigin: true,  //是否跨域
      },
      headers:{
	     //这边可以堆headers进行设置
	    }
  }
}
// 没有pathRewrite重写
// localhost:8080/api/test -> http://baidu.com/api/test
// localhost:8080/we/api/test -> http://baidu.com/we/api/test

// localhost:8080/api/test -> http://baidu.com/test
// localhost:8080/api/we/test -> http://baidu.com/we/test
// 加上/api重写后可以指定到任意层级
pathRewrite:{
    '^/api': '/'
}
// localhost:8080/api/test -> http://baidu.com/test

// 对所有接口都代理
devServer: {
 proxy: 'http://baidu.com'
}
// localhost:8080/we/er -> http://baidu.com/we/er

axios的baseURL

//axios.defaults.baseURL = ‘http://localhost/’; //调试环境
//axios.defaults.baseURL = ‘http://api.zxwyit.com/’; //生产环境
axios.defaults.baseURL = ‘http://192.168.1.188:8/’; //开发环境

axios.defaults.withCredentials = true;//跨域请求的全局凭证