vue里的配置代理

提示：本文主要利用vue的代理，解决ajax跨域的问题

---

前言

提示：这里可以添加本文要记录的大概内容：

本文主要利用vue的代理，解决ajax跨域的问题

---

一、准备

提前准备好两台服务器，使用node.js编写

服务器1

服务器2

二、获取学生信息

1、下载并引入axios

2、使用axios发请求

3、为什么会出现这种情况？

因为浏览器端口号与服务器提供端口号不一致导致，违背了同源策略
同源策略：协议名 主机名 端口号保持一致

注意：此时请求已经发送，服务器也返回了数据，
		浏览器已经接收到了数据，只是检测到了跨域，所以不将数据展示到页面上

4、如何解决
	(1) CORS
	(2) JSONP  只能解决get请求，不能解决post请求
	(3) 配置代理服务器

三、配置代理_方式一

使用vue-cli配置代理

1、修改vue.config.js

2、修改app.vue

3、细节一：
代理服务器不会将所有的请求都转发给5000，哪些请求不会呢？
服务器里本身就有的资源
验证：

在public下新增一个test.txt

随便写一个students

注意：
1、使用当前方式配置代理，不能配置多个代理
2、不能控制是否使用代理，即如果服务器里有资源，不知道是否要开启代理服务器，不够灵活

四、配置代理_方式二

4.1 灵活使用代理

1、修改vue.config.js

2、修改app.vue

结果：

原因：

如何解决？
	新加一个配置，
	前面是正则，意为匹配 /atguigu 的字符串为空，这样才回去请求5000里的/students，而不是/atguigu/students。

两个其他的配置，websocket是一种客户端和服务端通信的协议

1、修改server1.js用于验证changeOrigin为false

2、changeOrigin为true

4.2 如何配置多个代理

五、配置代理_总结

这篇好文章是转载于：学新通技术网