Vue-cli解决跨域问题--配置代理服务器

前置知识

常用发送ajax请求方式

1.xhr ：new XMLHttpRequest() 

真正开发中不常用，一般都是对xhr进行二次封装

2.jQuery（对xhr的封装）

核心是对DOM操作，在Vue中引入不合适（Vue的核心就是减少DOM操作）

3.axios（对xhr的封装） 最推荐！！！

是promise风格

支持请求拦截器 和响应拦截器

体积小 大约是jQuery的1/4

4.fetch

和xhr是平级的，是js里面内置的方法，可以直接new fetch

但是fetch会把请求返回的数据包两层promise

fetch不兼容IE浏览器

同源策略

协议名、主机名、端口号必须一致

解决跨域问题

1.cors 真正的解决跨域

不用前端人员做任何事情，是写服务器的人在服务器里面给我们返回响应的时候加几个特殊响应头。浏览器看见这些响应头会将数据返回给我们。

2.jsonp

需要前端后端一起来，只能解决get请求跨域问题 平时用的比较少

3.代理服务器  蒙蔽浏览器 让他以为你没有跨域

 在不同端口号的客户端和服务器之间加入代理服务器，代理服务器与客户端所处的端口号一致，客户端想要访问端口号5000这台服务器时，会先发请求给相同端口号的代理服务器，然后代理服务器再把请求转发给服务器。

同端口号的客户端和代理服务器之间符合同源策略。

代理服务器和服务器之间打交道用的是HTTP请求，不受同源限制。

开启一个代理服务器：反向代理服务器 nginx

接下来介绍另一种开启代理服务器的方法：

使用vue-cli里面的配置开启代理服务器

方法一：

​ 在config/index.js(vue-cli2)   vue.config.js（vue-cli3)的module.exports中添加如下配置：

devServer:{
  proxy:"http://localhost:5000" //要请求的服务器
}

说明：

1. 优点：配置简单，请求资源时直接发给前端（8080）即可。
2. 缺点：不能配置多个代理，不能灵活的控制请求是否走代理。
3. 工作方式：若按照上述配置代理，当请求了前端不存在的资源时，那么该请求会转发给服务器 （如果前端有所需资源，则优先匹配前端资源，不去发送请求给服务器）

方法二：

​ 编写vue.config.js配置具体代理规则：

module.exports = {
 devServer: {
      proxy: {
      '/api1': {// 匹配所有以 '/api1'开头的请求路径
        target: 'http://localhost:5000',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api1': ''} //匹配所有以api1开头的路径，api1把变成空字符串，保证代理服务器发给服务器的地址不带有自己设置的api1
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000（代理服务器欺骗服务器 骗他是一个端口号）
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。
2. 缺点：配置略微繁琐，请求资源时必须加前缀。