Vue脚手架配置代理

2022-02-05 13:30:35 阅读：171 来源： 互联网

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

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

什么是跨域

跨域就是：违背了同源策略。当协议，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"
    }
}

说明：

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

方法二

编写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
*/

说明：

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

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

标签：Vue,请求,配置,代理,代理服务器,5000,脚手架,跨域
来源： https://blog.csdn.net/m0_56219678/article/details/122789486

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Vue脚手架配置代理

什么是跨域

如何解决跨域

Vue脚手架配置代理

方法一：

方法二