1. 问题：如果解决前端的 ajax 请求跨域的问题
首先可以发送 ajax 请求的方法有哪些？
- xhr js自带的方法，
new XMLHttpRequest(), 但是配置太繁琐了，一般不用。 -
jQuery里面也封装了ajax的请求，但是现在也一般不用，原因是体积大，jQuery是针对 dom 操作的库，vue 里是不用的。 -
axios第三方的库，vue 也官方推荐
-fetch，ie浏览器不支持
在使用以上方法进行ajax请求的时候，很容易遇到的一个问题是跨域。
2. 什么是跨域？
所谓的跨域是指违背了浏览器的同源策略。浏览器规定了三个东西必须一致：协议名，主机名，端口号三个必须一致。
3. 怎么解决跨域？
- 第一种
cors，即后端在返回数据的时候，配置一些响应头； - 第二种：
jsonp。原理是利用script标签里的src属性在引入外部资源的时候，不受限制的特点。但是平常开发不常用。原因是只能解决get请求。 - 第三种：使用代理服务器。
所谓代理服务器就是在前端和服务器之间配置一个代理的服务器。一起前端直接去访问真实的服务器，现在先让前端访问代理服务器，然后代理服务器去访问真实服务区拿数据，再把数据给前端。为什么代理服务器跨域影响呢？因为代理服务器的协议名，主机名，端口号和前端是一致的。而服务器之间是没有这些限制的，服务器之间传输数据用的http协议。
3.1. 方法一
在 vue.config.js中添加如下配置
devServer:{
proxy:"http://localhost:5000" // http://localhost:5000 是服务器地址
}
说明：
优点：配置简单，请求资源时候，直接发给前端 8080 端口
缺点：不能配置多个代理，不能灵活的控制请求是否走代理
工作方式：若按照上述配置代理，当请求了前端不存在的资源时候，那么该请求会转发给服务器（优先匹配前端资源。这里指的是优先匹配 public 文件夹下的文件）
3.2. 方式二
编写 vue.config.js 配置代理规则：
module.exports = {
devServer: {
proxy: {
'/api1': { //匹配所有以 "/api1" 开头的请求路径
target: "http://localhost:5000", // 代理目标的基础路径（基础路径的意思是只用写到端口号，不用写到具体的文件）
changeOrigin: true, //
pathRewrite: {'^/api':''}
},
//配置第二台服务器
'/api2': { //匹配所有以 "/api2" 开头的请求路径
target: "http://localhost:5001", // 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api':''}
}
}
}
}
/*
`changeOrigin: true`：代理服务会对真实的服务器撒谎，比如只是服务器的端口号为 5000，
代理服务器也会说自己是5000，目的是为了防止真实服务器不给自己数据。这个默认设置为 true
pathRewrite: {'^/api':''} 是和上面的'/api2' 一起用的，如果不配置，代理服务器会把在真实的地址里加上'/api2'
去真实服务器拿数据，但是这个是拿不到的。因此{'^/api':''} 的意思是使用正则表达式，匹配到所有的/api，然后替换为空
*/
说明：
优点：可以配置多个代理服务器，且可以灵活控制请求是否走代理。
缺点配置略微繁琐，请求资源时候必须加前缀。
