首页>>前端>>Vue->Vue脚手架配置代理解决跨域问题

Vue脚手架配置代理解决跨域问题

时间:2023-11-29 本站 点击:0

前言

在进行web开发进行数据请求的时候常常会遇到跨域问题导致无法请求数据。

如果采用如下方法向http://localhost:4000服务器发送getStudents进行接口数据请求,在后端没有处理跨域问题时可能会遇到如下错误。

出现跨域是因为浏览器的同源策略问题,也就是协议(protocol),主机(host)和端口号(port)有不同的情况。我们本地进行web开发肯定会与后端端口号不同所以会出现跨域问题。

getStudent(){axios({url:"http://localhost:4000/getStudents",method:"GET",}).then((res)=>{console.log(res.data);});}

vue提供两种方法来解决跨域问题。

Vue配置代理方式一

官网:

简单的配置可以采用如下方法,即将要请求的协议、地址和端口号配置在文件里,就可以进行访问了。

在vue.config中添加如下配置:

devServer:{proxy:'http://localhost:4000'}

说明:

优点:配置简单,请求资源时直接发送给前端(8080)即可

缺点:不能配置多个代理,不能灵活的控制是否走代理。

工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)

Vue配置代理方式二

如果web应用有多个接口去请求数据,或者前端有与接口同名的资源被阻拦了可以采用以下方式进行配置。

注意:请求的地址需要在端口号后面加上一个自定义的名称,在配置文件里需要加上pathRewrite: {'^/api1': ''}再去掉地址中的名称。

getStudent(){axios({url:"http://localhost:5000/api1/getStudents",method:"GET",}).then((res)=>{console.log(res.data);});}

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

module.exports={devServer:{proxy:{'/api1':{//匹配所有以'api1'开头的请求路径target:'http://localhost:5000',//大力目标的基础路径ws:true,pathRewrite:{'^/api1':''}//发送请求的地址再去掉'api1'前缀changeOrigin:true},'/api2':{//匹配所有以'api2'开头的请求路径target:'http://localhost:5001',pathRewrite:{'^/api2':''}}}}}

说明:

优点:可以配置多个代理,且可以灵活的控制请求是否走代理。

缺点:配置略微繁琐,请求资源时必须加前缀。


本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:/Vue/833.html