14-vue-cli脚手架配置代理

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，然后替换为空
*/

说明：
优点：可以配置多个代理服务器，且可以灵活控制请求是否走代理。
缺点配置略微繁琐，请求资源时候必须加前缀。