VUE2 学习笔记15 代理

代理

前后端通信：当前后端通信时，在两个地址间发送ajax请求（xhr、jQuery、axios、fetch等），一般推荐使用axios，通过npm i axios安装，通过import axios from 'axios'引入。

跨域

前后端通信时，如果前后端的地址不同源（协议、端口、域名不一致）时，两个地址是无法进行通信的。在前后端不同源时，后端服务器会接收到前端的请求，服务器也会响应这个请求，前端浏览器也会接收这个响应，但是当浏览器检测到这个响应是跨域的响应时，不会把收到的后端服务器响应反馈给用户。

解决跨域

1.CORS 该方法与前端无关，是后端在服务器给前端进行响应时，配置响应头，浏览器在接收到这些响应头时会允许数据反馈给用户。

2.jsonp 借助script标签的src在引入外部资源时不受同源策略限制的机制，但在使用这种方法时，需要前端后端一起进行配置，而且只能解决get请求的问题，一般很少使用。

3.配置代理  配置代理时，相当于在前后端交互时，有一个代理服务器，代理服务器和前端的端口号一致，当前端向后端请求数据时，不直接给后端发送请求，而是把请求发给代理服务器，代理服务器把请求转发给后端服务器，代理接收到后端服务器的数据时（由于代理服务器和后端服务器都是服务器，服务器之间通过HTTP请求通信，也不存在跨域问题），代理服务器把数据反馈给前端。由于代理服务器和前端同源，因此也不存在跨域问题。

配置代理的方法：

1.nginx 

2.vue-cli提供的的proxy（devServer.proxy）

devServer.proxy

proxy配置在vue.config.js中，配置参考 | Vue CLI

配置步骤：

1.添加proxy配置

在配置项中，proxy代表配置要转发的地址（服务器端地址）

2.修改前端项目中请求的地址

向代理服务器地址发送请求

修改配置项后，要重新启动前端项目，才能生效。

配置代理时，使用proxy:value的形式时，value按一个固定的地址字符串配置：

用这种方式配置代理时，代理服务器并不会把所有请求都进行转发，当请求的资源代理服务器本身就有时，就不会进行转发。代理服务器会把前端的public文件夹当做服务器的根目录，当请求的数据是本地具有的数据时，代理服务器并不会对请求进行转发。

如果本地的public文件中有同名文件，在前端进行axios请求时，会直接返回前端public下的资源，所以要注意，不要产生同名问题。

而且用这种方式配置代理时，不能配置多个代理，也无法控制何时进行转发，也就是说，默认是在本地有资源的情况下不会进行转发，没有资源的情况下进行转发，且只能转发到一个固定的服务器。

配置代理时，使用proxy:value，且value是一个配置对象：

在配置对象内部，可以配置多个配置对象，每个配置对象的key是请求前缀，请求前缀是跟在端口号后面的部分（忽略了协议、端口、域名的最前方），当请求前缀匹配上时，才会走当前配置对象配置的代理服务器。value中，target指请求满足当前前缀时，应该转发给的后端服务器。用pathRewrite可以在代理服务器向后端服务器转发时，重写请求的路径。

pathRewrite的value是一个对象，对象中以key:value配置，key是正则表达式形式的匹配，value是把匹配到的内容要替换成什么。

ws用于支持websocket。

changeOrigin用于代理服务器向后端服务器通信时，Host地址是否真实，当changeOrigin为true时，代理服务器会修改请求Host，把Host修改为target，为false时，Host为本地端口。默认为true。如果后端服务器存在限制，可能不允许其他地址访问，设置为true可以避免这些问题。

对于项目中引入的静态css资源，可以在App.vue或者main.js中进行引入。但在通过Import引入在App或者main中时，会对css资源进行严格的检查，如果缺少css中请求的资源，即使没有使用，也会报错。这时可以把css通过link ref引入public的html中。

思考一个简单的搜索功能

思考一种情况，对于一个搜索列表，如果初始进入列表时，显示的是欢迎词，当搜索时，数据未返回时，显示的是加载画面，当数据返回后，显示的是数据列表，当数据请求失败时，显示错误信息。且搜索框和列表是两个组件实现是，两个组件是兄弟关系。通过全局事件总线通信。

如何实现这种效果：

当进行搜索请求时，请求在搜索组件中发送，请求获得的数据通过全局事件总线触发emit传送给列表组件。列表组件中，通过全局事件总线on绑定过事件，获得搜索组件传递的数据。

通过数据辅助：设置是否初始加载的数据（ifFirst）、设置是否显示加载页面（ifLoading）、设置是否显示出错页面（ifError）。这些数据存在列表组件中，但他们的状态是由请求的状态控制的，也需要随全局事件总线一起传输给列表组件。

ifFirst初始默认true，ifLoading和ifError默认false。

当用户和页面交互，想查看搜索结果时，在搜索组件中触发methods，先让ifLoading设置为true，ifFirst为false，并通过$emit把这种修改传递给列表组件，然后搜索组件发送请求，当响应返回时，ifLoading变为false，如果请求成功，通过$emit传递成功的数据，以及辅助数据；如果请求失败，ifError为true，返回数据为空，这些数据也通过$emit传递。

传递数据时 和 接收数据时，出于可读性的考虑，传递的数据可以以对象的形式传送，解构或对象 的形式接收。

vue-resource

vue-resource是一种用于发送ajax请求的vue插件库。

安装：npm i vue-resource

引入：import 接收名(可以随便起) from 'vue-resource'

使用：Vue.use(接收名)

在使用完成后，Vue实例和VueComponent实例上，会多一个$http。

通过this.$http.get/this.$http.post发送请求，其语法和axios是一样的，也是promise风格。