Vue - 跨域代理

参考文档：devServer.proxy

前端开发接入接口时，难免遇到跨域请求（协议/域名/端口与后台接口不一致），最简单的解决方法是让后台同事将接口设置为可支持跨域请求，待项目上线再关闭。但这也容易造成，开发的这段时间内，其他人也能访问到后台的接口

另一种解决方法是在vue-cli中设置代理，我的项目中使用 vue-cli3、axios

出现跨域的写法

// axios配置文件
axios.defaults.baseURL = 'https://www.demo.com/xxx/xxx'

axios.post('Home/ad')
  .then(res => {
  })
  .catch(err => {
  })

axios请求 'https://www.demo.com/xxx/xxx/Home/ad'，出现跨域

设置代理

在项目根目录新建 vue.config.js

module.exports = {
  devServer:{
    proxy: "https://www.demo.com/xxx/xxx"
  }
}

// axios配置文件，判断当前为开发环境时，由代理提供接口的前缀
axios.defaults.baseURL = process.env.NODE_ENV === 'development' ? '' : 'https://www.demo.com/xxx/xxx'

axios.post('Home/ad')
  .then(res => {
  })
  .catch(err => {
  })

axios通过代理的方式请求 'https://www.demo.com/xxx/xxx/Home/ad'，从而避免跨域产生

更多代理控制行为

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'www.demo.com/a',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: 'www.demo.com/b',
        ws: true,
        changeOrigin: true
      }
    }
  }
}

当请求为 api字符串 开头时候，将代理 <url> 接口

// 将请求 www.demo.com/a/api/Home/ad
axios.post('api/Home/ad')
  .then(res => {})

// 将请求 www.demo.com/b/api/Home/banner
axios.post('foo/Home/banner')
  .then(res => {})