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

相关推荐
嘗_几秒前
暑期前端训练day5
前端
uncleTom6667 分钟前
前端布局利器:rem 适配全面解析
前端
谦哥10 分钟前
Claude4免费Vibe Coding!目前比较好的Cursor替代方案
前端·javascript·claude
LEAFF21 分钟前
如何 测试Labview是否返回数据 ?
前端
Spider_Man23 分钟前
🚀 从阻塞到丝滑:React中DeepSeek LLM流式输出的实现秘籍
前端·react.js·llm
心在飞扬24 分钟前
理解JS事件环(Event Loop)
前端·javascript
敲代码的玉米C27 分钟前
深入理解链表反转:从基础到进阶的完整指南
javascript
盏茶作酒2940 分钟前
打造自己的组件库(一)宏函数解析
前端·vue.js
山有木兮木有枝_1 小时前
JavaScript 设计模式--单例模式
前端·javascript·代码规范
一大树1 小时前
Vue3 开发必备:20 个实用技巧
前端·vue.js