Vue 本地开发请求跨域的解决以及服务器代理的原理，永远不要做只用不学的人【一】

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

前言

相信每个前端开发者开发Vue框架项目的时候，基本都会利用本地服务器（proxyTable）代理去解决本地联调跨域的问题。平时我们只知道使用，却不知道实现原理。有些人甚至连用都不会用。所以今天我们就来讲讲proxyTable的使用以及原理

一、`proxyTable`的使用

我们在使用 vue-cli 工具生成 vue 项目后，都会生成一个配置文件，Vue-cli2.x 生成项目的配置文件路径是/config/index.js。而Vue-cli3.x以上生成项目的配置文件路径是/vue.config.js

代码如下：

dev: {
  ...
  proxyTable: {
    '/api': {
      target: 'http://www.abc.com',  // 目标接口域名
      changeOrigin: true,  // 是否跨域
      pathRewrite: {
        '^/api': '/api'   // 重写接口
      }
    }
   }
   ...
}

上面这段代码的效果就是将以/api字段起始的本地接口请求代理到了http://www.abc.com这一域名下：

'http://localhost:8080/api' ===> 'http://www.abc.com/api'

上面就是proxyTable的基本使用，下面我们来讲一下proxyTable含义

简析

proxyTable 是 vue-cli 脚手架在开发模式下,为我们提供的一个跨域的代理中转服务器服务.基于 (http-proxy-middleware插件).

含义

为什么要有 proxyTable?

有时候在开发期间,我们请求的后台接口(a.b.c/data.json)不和vue(localhost:8080)在同一个域名,后台也并未提供cors跨域服务.

正常情况下,我们无法通过ajax向后台请求到数据.因为跨域了.浏览器的同源策略,截获了这次数据的返回,没有给vue.

解决办法有两个:

服务器开启 cors (最简单,也是最方便的)
用代理服务器中转一下(vue请求的还是自己的后台,让后台去请求真是数据的后台,然后再将数据返回给vue)

配置 proxyTable 来进行跨域

proxyTable 跨域的基本原理是:

在开发模式下,webpack 会为我们提供一个http代理服务器
我们请求接口的时候,实际上是请求的webpack
供的这个http代理服务器
在由这个代理服务器请求真是的数据服务器
最后数据经由webpack代理服务器,最后转交给我们的vue程序.

为什么加个代理服务器就可以了?

因为代理服务器不是浏览器,它没有同源策略的限制.
在了解到了基本原理之后,就可以看看 proxyTable 这个节点的一些配置属性了.

proxyTable: {
  // 这里配置 '/api' 就等价于 target , 你在链接里访问 /api === http://localhost:54321
  '/api': {
    target: 'http://localhost:54321/', // 真是服务器的接口地址 
    secure: true, // 如果是 https ,需要开启这个选项
    changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了.
    pathRewirte: {
      // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.
      '^/api': '', 
      // 等价于 
      // step 1  /api = http://localhost:54321/
      // step 2 /^api = /api + api == http://localhost:54321/api
    }
  }
 }

关于 pathRewrite 节点说明:

首先，在ProxyTable模块中设置了‘/api’，target中设置服务器地址，也就是接口的开头那段地址，例如http://localhost:54321/，然后我们在调用接口的时候，就可以全局使用/api，这时候/api的作用就相当于http://localhost:54321/，比如接口的地址是http://localhost:54321/api/json.data，我们就可以使用/api/json.data

那pathRewrite是用来干嘛的呢，这里的作用，相当于是替代/api，如果接口中是没有api的，那就直接置空，如果接口中有api，那就得写成{^/api:/api}，可以理解为一个重定向或者重新赋值的功能。

总结:

proxyTable 就是webpack在开发环境给我们提供的一个代理服务器,(使用的是 http-proxy-middleware)
目的是为了在服务器不方便开启跨域功能的时候,我们也能方便的在开发阶段发送ajax跨域请求.
当了真实发布环境,这个玩意就不起作用了.除非自己配置一个代理服务器,或者让后台开启 cors

这一章我们先讲到这里，下一章我们继续讲服务器代理的原理这块的内容。感谢大家的观看

Vue 本地开发请求跨域的解决以及服务器代理的原理，永远不要做只用不学的人【一】

前言

一、proxyTable的使用

为什么加个代理服务器就可以了?

一、`proxyTable`的使用