vue的proxy代理使用

vue 中的 proxy 就是利用了 Node 代理，原理还是因为服务器端没有跨域这一说嘛，也是用了这么一个插件 地址

‘/api’：是指遇到这个字符开头的话，在这个字符前面加上target里面的ip或者域名。

举例：

①登录接口： http://1.2.3.4:5000/login

…中间省略了配置过程…

②npm run serve: Local: http://localhost:8080/

③点击后发送的登录请求： http://localhost:8080/api/login

④/api 的作用就是将 /api 前的localhost：8080变成target的内容 http://1.2.3.4:5000/

⑤完整的路径变成了 http://1.2.3.4:5000/api/login

⑥实际接口当中没有这个api，所以 pathwrite 重写就解决这个问题的。

⑦ pathwrite 识别到api开头就会把/api重写成空，那就是不存在这个/apil了，完整的路径又变成： http://1.2.3.4:5000/login

配置代理后，会做如下转发：

localhost:8080/api/test ->http://e.dxy.net/api/test

localhost:8080/bcma/api/test ->http://e.dxy.net/bcma/api/test

有新手朋友可能会问：这样做是不是只是本地调试这样做，线上怎么办呢？

我们一般调接口 axios.get('/api/test') ，这样调是自动请求的当前域名，也就是本地就调用 localhost:8080 ，到了线上就是你们自己的服务域名，所以这个只是为了本地调试使用。当然，如果你要同时调用很多个不同的域名服务，那你调用的时候就要把相关的域名明确写出来，如 axios.get('http://e.dxy.net/api/test')

当你调接口后端的命名没有统一给接口前加 /api 这类的标识，那么你可以自己加，也就是你可以在本地调 localhost:8080/api/test ，如 axios.get('/api/test') ，而你要的目标接口是 http://e.dxy.net/test ，你就可以用 pathRewrite，遇到 /api 就去找代理 http://e.dxy.net 并且把 /api 重写为 / 。

所以转发效果就是：

localhost:8080/api/test ->http://e.dxy.net/test

这个是对所有的接口都代理的，不止是检测到 /api 的接口，比如：

localhost:8080/api/test ->http://e.dxy.net/api/test

localhost:8080/test ->http://e.dxy.net/test

Vue CLI 配置参考

Object.defineProperty : 通过设定对象属性getter/setter方法来监听数据的变化，同时getter也用于依赖收集，而setter在数据变更时通知订阅者更新视图。

1.无法检测到对象属性的新增或删除

由于js的动态性，可以为对象追加新的属性或者删除其中某个属性，这点对经过Object.defineProperty方法建立的响应式对象来说，只能追踪对象已有数据是否被修改，无法追踪新增属性和删除属性，这就需要另外处理。

2.不能监听数组的变化

vue在实现数组的响应式时，它使用了一些hack，把无法监听数组的情况通过重写数组的部分方法来实现响应式，这也只限制在数组的push/pop/shift/unshift/splice/sort/reverse七个方法，其他数组方法及数组的使用则无法检测到。

Proxy，字面意思是代理，是ES6提供的一个新的API，用于修改某些操作的默认行为，可以理解为在目标对象之前做一层拦截，外部所有的访问都必须通过这层拦截，通过这层拦截可以做很多事情，比如对数据进行过滤、修改或者收集信息之类。借用 proxy的巧用 的一幅图，它很形象的表达了Proxy的作用。

ES6原生提供的Proxy构造函数，用法如下：

其中obj为Proxy要拦截的对象，handler用来定制拦截的操作，返回一个新的代理对象proxy；Proxy代理特点：

1.Proxy的代理针对的是整个对象，而不是像Object.defineProperty针对某个属性。只需做一层代理就可以监听同级结构下的所有属性变化，包括新增属性和删除属性

2.Proxy也可以监听数组的变化

参考： https://juejin.cn/post/6850418111985352711

在开发环境，vue-cli 会帮我们创建一个开发服务器( http://localhost:8080 )，因此，我们请求后端服务器的时候，可能会出现跨域问题，因为跨域的三要素：域名、端口、协议其一不同。

完整的请求地址：

我的这个地址，里面本身就携带有 api 字段的

利用 vue-cli 中的 devServer 配置

记住，如果你的地址没有类似我那个地址那样，有个 api 作为标识的，你可以手动在地址上加上一些标识，然后利用 pathRewrite 再抹掉即可。

一般不会这么做，这样做意义也不大。因为这么做的话，不单单ajax请求都用的远程，连js、css、图片等其他资源都是远程返回的。。。

用了这个方法，在开发阶段，就不用设置 axios 中的 baseUrl 了，或者这样设置：

然后开发阶段，你的一些ajax的请求的 url 就会匹配到 /api 开头，设置 proxy了

千万不要这么设置：

看似匹配到了，实际上没有生效。。。（我也不知道为什么，知道的同学说一下）

实际上，这里是看不到的。。

因为，F12 这里的这个请求，实际上是发给了 本地的临时服务器，再由本地的服务器发送给远程服务器。

可以这么理解：本地服务器将F12的这个请求拦截了，然后自己偷偷改掉 url，再请求的远程服务器。

正因为本地服务器脱离浏览器的束缚，解决了跨域问题！

---