阅读 7793

[VUE] 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.jsconfig/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插件来进行代理服务器等各项配置。

文章分类
前端
文章标签