vue cli处理跨域问题

开发环境的跨域

开发环境的跨域 , 也就是在vue-cli脚手架环境下开发启动服务器时 , 我们访问接口所遇到的跨域问题 , vue-cli为我们在本地开启了一个服务 , 可以通过这个服务帮我们代理请求 , 解决跨域. 这就是vue-cli配置webpack的反向代理

 

采用vue-cli的代理配置

vue-cli的配置文件即vue.config.js , 这里有我们需要的代理选项

module.exports = {
  devServer: {
  // 代理配置
    proxy: {
    // 这里的api 表示如果我们的请求地址有/api的时候 , 就会触发代理机制
    // localhost:8888/api/abc => 代理给另一个服务器
    // 本地的前端 => 本地的后端 => 代理我们向另一个服务器发请求
    // 本地的前端 => 另一个服务器发请求(跨域)
      '/api': {
      // 我们要代理的地址
        target: '',
        // 是否跨域 需要设置此值为true 才可以让本地服务器代理我们发出请求
        changeOrigin: true,
        // 路径重写
        pathRewrite: {
          // 重新路由 localhost:8888/api/login => www.baidu.com/api/login
          '^/api': '' // 假设我们想把localhost:8888/api/login 变成www.baidu.com/login 就需要这么做
        }
      }
    }
  }
}

 

生产环境的跨域

生产环境表示我们已经开发完成项目 , 将项目部署到服务器上 , 这时候已经没有vue-cli脚手架的辅助 , 我们只是把打包好的html+css+js , 交付运维人员 , 放到Nginx服务器而已 , 所以此时需要借助Nginx的反向代理来进行