vue 配置代理方式一有点不完美的方法（ajax跨域问题）

要点：

这样配置有点不完美

1.不能让代理服务器给多个端口号实现连接，只能实现一个

2.而且只能对服务器自身没有的发送请求

 devServer: {
    proxy: 'http://localhost:4000'
  }

 

这边我们vue推荐使用它axios,体积小兼容性高（axios与jQuery都是基于xhr）

xhr使用麻烦,jQuery库太大其中大约百分之八十是分装dom的内容 fetch与xhr同级,但是fetch使用时要promise两次而且兼容性不好,对ie浏览器会有问题

 发送一个请求：

1.安装axios 

2.引入axios

 成功之后给你的对象response为响应对象响应对象里的data属性才是真正服务器给你的东西

运行发现报错

这边就是发生了跨域

违背了同源策略（协议名、主机名、端口号）

 但是要注意的是请求此时是发了的服务器也收到了,而且也给你返回了只是返回里面没有东西，因为你跨域了

解决方法1cors（后端实现）：使用cors在后端返回数据的时候加一个特殊响应头,当浏览器识别到这个特殊响应头时,就不会因跨域也阻止返回数据给前端但这样方式要在服务器后端实现

解决方法2jsonp解决跨域（不推荐）

原理就是使用了script的src在引入外部资源的时候不受同源策略的约束来实现的

但是这个需要前端和后端一起努力,才能实现跨域,而且只能实现get请求的跨域其他的不行

所以开发中用得微乎其微.但是很巧妙，面试可能会问

 解决方法3（代理前端开发推荐）

原理：会用到一个代理服务器,而且它的位置与我们得位置一样（前端）,也就是我们与代理服务器的信息交互是遵守同源策略的,是可以互相通信的

而右边是服务器与服务器之间的交互所以不是通过Ajax（是一个前端技术）来进行通信的,通过http协议进行通信,所以同源策略根本管不到服务器与服务器之间的交互

 然后开启这个代理服务器有两种方法

一种为nginx但是这种是需要有后端知识的相对学习成本会高

而vue-cli方法就是脚手架自带了可以帮你开启一个代理服务器的功能

而且这边注意我们的端口号为8080,当我们开启代理服务器之后,需要去请求的地址就为8080（因为代理服务器与我们的位置相同）的端口号了

 

 

 开启一个代理服务器

注意这边写的端口号,不是代理服务器的8080，而是写那个需要通过代理服务器把请求转发给谁的端口号,这边就是5000 

 注意之前也说过但修改了vue.config,js的内容后,就需要重新启动项目,才能实现新的配置

但是运行发现还是有跨域问题,这是因为你还忘改了一个地方

因为你的前端需要去联系8080的代理服务器

 这边要改成8080,并且还要写要什么8080/students

 

 

成功请求 

但是这边有两个细节上的问题

8080不会把自己本来就有的数据发给5000

 这里的public文件夹相当于8080代理服务器根文件夹 public里面有什么就是8080服务器里面有什么

 

验证：

随便在public里面写一个text.txt文件

发现只要public里面有的都可以用8080/xxx显示出来

 

 

然后我们在文件夹里写入一个students注意不加后缀

然后我们这边的get请求,会直接在public（前端）里面找到students找到,就不会再向5000服务器去发送请求了

 

运行发现的得到的就是你前端在public里students里的内容

 而且这么写代理只能给5000发送请求,不能同时给5000又给5001，不能配置多个