Vue-Cli配置跨域代理

Vue-Cli配置跨域代理

实现目标：通过配置vue-cli的代理解决跨域访问的问题
前情提要：为什么会出现跨域？
当下,最流行的就是**前后分离项目,也就是前端项目和后端接口并不在一个域名之下，那么前端项目访问后端接口必然存在跨域的行为；

补充：我们所遇到的这种跨域是位于开发环境的，真正部署上线时的跨域是生产环境**的；

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

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

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

**vue.config.js的改动如果要生效,需要进行重启服务

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

server{
    # 监听9099端口
    listen 9099;
    # 本地的域名是localhost
    server_name localhost;
    #凡是localhost:9099/api这个样子的，都转发到真正的服务端地址http://baidu.com
    location ^~ /api {
        proxy_pass http://baidu.com;
    }    
}

这里的操作一般由运维人员完成,不需要前端进行操作,这里我们进行一下简单了解；

更多正向代理和反向代理知识,请阅读这篇文章Nginx反向代理