Vue配置代理解决跨域

我们在发送数据请求的时候经常会遇到跨域的情况。

如:我们使用axios向http://localhost:5000/test端口发送请求,结果跨域了:

解决跨域请求有如下几种方式:后端设置cors,jsonp,vue-cil配置代理。

配置代理可以理解为Vue为你开了一台和你端口号相同的服务器,将浏览器和服务器之间的通话转化为服务器与服务器之间进行通话。

一、方式一

(一)配置代理服务器

在vue.config.js文件下配置代理服务器:

devServer: {

proxy:'xxx' // 服务器端口

}

注意:这里的端口是目标访问服务器的端口号

(二)发送axios请求

发送axios请求的端口号为本机端口号:

以上步骤完成后即可解决请求跨域问题

(三)使用该方式的缺点

  1. 不能配置多个代理。

  2. 不能灵活地控制该请求是否走代理。

二、方式二

(一)配置代理服务器

如果使用该写法,就能够配置多个代理服务器,还能灵活控制是否走代理。

在vue.config.js中配置代理服务器:

devServer: {

proxy: {

// 配置所有以 '/api1' 开头的请求路径

'/api1': {

target: 'xxx', // 代理目标的端口路径

pathRewrite: { '^/api1': '' }, // 替换请求路径中的字符

changeOrigin:true // 是否更改配置代理服务器的端口号

},

// 配置所有以 '/api2' 开头的请求路径

'/api2': {

target: 'xxx',

pathRewrite: { '^/api1': '' },

changeOrigin:true

},

}

}

(二)发送axios请求

注意:要在发送的请求路径后添加在配置代理中设置的 '/api'

通过哪个配置代理服务器发送请求就添加设置的哪个api

相关推荐
MrGaoGang9 分钟前
耗时1年,终于我也拥有属于自己的AI工作流
前端·agent·ai编程
没有鸡汤吃不下饭22 分钟前
前端【数据类型】 No.1 Javascript的数据类型与区别
前端·javascript·面试
码流之上25 分钟前
【一看就会一写就废 指间算法】设计电子表格 —— 哈希表、字符串处理
javascript·算法
跟橙姐学代码25 分钟前
Python时间处理秘籍:别再让日期时间卡住你的代码了!
前端·python·ipython
汤姆Tom30 分钟前
从零到精通:现代原子化 CSS 工具链完全攻略 | PostCSS × UnoCSS × TailwindCSS 深度实战
前端·css·面试
菜市口的跳脚长颌31 分钟前
Web3基础
前端
RoyLin33 分钟前
TypeScript设计模式:代理模式
前端·后端·typescript
IT_陈寒2 小时前
Vue3性能优化实战:这5个技巧让我的应用加载速度提升了70%
前端·人工智能·后端
树上有只程序猿2 小时前
react 实现插槽slot功能
前端