Vue脚手架配置代理服务器解决跨域

在讲脚手架配置代理之前，先说一下为什么要配置代理。

在开发中，经常会遇到跨域问题。

什么是跨域

跨域就是：违背了同源策略。当协议，ip/域名，端口有任何不同，都被当成跨域。跨域发生的时机是请求，响应回来之后。浏览器主动监测是否跨域。跨域的本质是请求成功了，响应也成功了。但是由服务端响应回来的数据被浏览器拦截。检测出跨域，抛异常。因此跨域并不影响一次成功的请求。在跨域之前请求已经执行完毕了。

如何解决跨域

解决跨域有三种方式：

1.通过cors解决跨域

cors其实就是写服务器的人，在服务器返回响应的时候，加上特殊的响应头。之前我们说过，跨域是响应被浏览器拦截了。那浏览器看见这些特殊的响应头，就会放行。但是需要后端人员来进行配置。

2.通过Jsonp来进行跨域。

Jsonp跨域其实是利用了script标签里面的src的属性，在引入外部资源不受同源策略限制的这个特点。（具体看之前的博客，这里不过多解释）

3.代理服务器

假设前端项目的端口是8080，服务器的端口号是5000。这时候受到同源策略的影响就会产生跨域。

那这时候，启用一个代理服务器。这个代理服务器的端口和前端项目的端口保持一致，都是8080。这时候，前端发起请求，直接访问这个代理服务器。然后通过这个代理服务器去访问那个5000端口的服务器。代理服务器的端口虽然是8080，但是服务器之间没有同源策略，所以不会跨域。这就是代理服务器解决跨域的方法。

Vue脚手架配置代理

接下来说下怎么通过vue-cli来配置代理。

打开vue的官方文档，里面有说明：配置参考 | Vue CLI

方法一：

创建一个vue.config.js，输入以下配置

代码：

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': ''},
        //ws: true,//用于配置websocket
        changeOrigin: true
      },
      '/api2': {// 匹配所有以 '/api2'开头的请求路径
        target: 'http://localhost:5001',// 代理目标的基础路径
        changeOrigin: true,
        pathRewrite: {'^/api2': ''}
      }
    }
  }
}
/*
   pathRewrite如果不配置，去服务器拿数据的时候，5000端口服务器因为加上了前缀，会返回404.所以需要            
   配置，当访问5000端口服务器时，会把前缀去掉。
   changeOrigin设置为true时，服务器收到的请求头中的host为：localhost:5000
   changeOrigin设置为false时，服务器收到的请求头中的host为：localhost:8080
   changeOrigin默认值为true
*/

说明：

1. 优点：可以配置多个代理，且可以灵活的控制请求是否走代理。

2. 缺点：配置略微繁琐，请求资源时必须加前缀。

以上就是Vue脚手架代理的基本使用。