[VUE] vue配置反向代理解决跨域__Vue.js

粉丝福利 : 关注VUE中文社区公众号，回复视频领取粉丝福利

正向代理与反向代理

正向代理：在客户端和原始服务器(origin server)之间架设一个代理服务器，为了从原始服务器取得内容，客户端向代理发送一个请求并指定目标(原始服务器)，然后代理向原始服务器转交请求并将获得的内容返回给客户端。客户端必须要进行一些特别的设置才能使用正向代理。

反向代理：反向代理（Reverse Proxy）方式是指以代理服务器来接受网络上的连接请求，然后将请求转发给内部网络上的服务器，并将服务器上得到的结果返回给请求连接的客户端，此时代理服务器对外就表现为一个反向代理服务器。客户端无需做任何配置。

在前后端分离的网站架构中，服务器经常要配置反向代理，使前端通过固定地址访问后端接口，这样后端服务可以采取负载均衡等性能优化措施，对前端应用透明。

假设前端服务器地址为：http://127.0.0.1:8080，后端实际服务地址为：http://server/web-service/userList ，由于涉及到跨域的问题，前端无法直接发http请求给此地址，只能发送同域下的api请求例如：http://127.0.0.1:8080/api/userList，通过上文介绍，我们了解到需要在前端服务器上配置反向代理，实现将api请求转发至后台服务器的目的。

实现

配置：config/index.js中的proxyTable

dev{
	proxyTable: {
      '/api': {
        target: 'http://192.168.0.1:200', // 要代理的域名
        changeOrigin: true,//允许跨域
        pathRewrite: {
          '^/api': '' // 这个是定义要访问的路径，名字随便写
        }
   }
}

使用时：

// /api/getMenu相当于*http://192.168.0.1:200/getMenu
 // /api相当于http://192.168.0.1:200
 this.$http.get("/api/getMenu", {
 }
 .then(res => {
 })
 .catch(function(error) {
 });

注意：以上面代码设置的为例，会把请求中所有带有/api字段的都替换掉，例如api/getMenu/api，前后两个都会被替换，导致404等错误，在代理数量比较多的时候容易出现这个问题。

以上配置只是在开发环境（dev）中解决跨域。要解决生产环境的跨域问题,则在config/dev.env.js和config/prod.env.js里也就是开发/生产环境下分别配置一下请求的地址API_HOST，开发环境中我们用上面配置的代理地址api，生产环境下用正常的接口地址。配置代码如下：

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',     //开发环境
  API_HOST:"/api/"
})


module.exports = {
  NODE_ENV: '"production"',      //生产环境
  API_HOST:'"http://40.00.100.100:3002/"'
}

原理

浏览器是禁止跨域的，但是服务端不禁止，在本地运行npm run dev等命令时实际上是用node运行了一个服务器，IP与后端不一致，所以会产生跨域问题，需要使用如JSONP、跨域代理等手段进行跨域请求，而vue已经帮我们配置好了，只需要设置一下proxyTable就行。因此proxyTable实际上是将请求发给自己的服务器，再由服务器转发给后台服务器，做了一层代理，因为不会出现跨域问题。

底层

vue-cli采用http-proxy-middleware插件来进行代理服务器等各项配置。