Vue 使用反向代理

在 vue 开发中，可以利用 axios 和 反向代理 实现跨域获取服务端数据

我们要获取'猫眼'的电影数据，利用 axios 直接对'猫眼'发送请求（代码如下），会产生跨域错误

 axios.get(
        'https://m.maoyan.com/ajax/movieOnInfoList?' +
        'token=&' +
        'optimus_uuid=28482190500011EBA3CF97AA93443353DADC22F01B5547DE9A41A31655155A49&' +
        'optimus_risk_level=71&' +
        'optimus_code=10'
      )
      .then((res) => {
        console.log(res.data)
      })

修改上述代码，改为利用 axios 向自己本地发送请求（代码如下），此时会造成404错误

 axios.get(
        '/ajax/movieOnInfoList?' +
        'token=&' +
        'optimus_uuid=43388C403C4911EABDC9998C784A573A4F64A16AA5A34184BADE807E506D749E&' +
        'optimus_risk_level=71&' +
        'optimus_code=10'
      )
      .then((res) => {
        console.log(res.data)
      })

由于 vue 开发环境是基于 node 运行的，我们需要通过对 vue 进行配置，让 vue-cli 利用 node 来转发我们的请求到'猫眼'服务器，从而获取数据。
在 vue 开发项目中，建立vue.config.js文件

module.exports = {
  // 利用反向代理发请求
  devServer: {
    proxy: {
      '/ajax': { // 只要是'/ajax'开头的url,代理到target开头的服务器
        target: 'https://m.maoyan.com',
        changeOrigin: true
      }
    }
  }
}

重启 vue 服务，实现反向代理获取数据
详见官方文档：https://cli.vuejs.org/zh/config/#devserver

PS:上述内容是在进行vue开发时，借助vue开发环境的node后台发送反向代理，
在vue项目编译完成后，若部署在ngxin服务器上，配置反向代理，可以参考：vue项目部署nginx服务器