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

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

什么是跨域

跨域就是:违背了同源策略。当协议,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脚手架代理的基本使用。