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

相关推荐
小白变怪兽1 小时前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头1 小时前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全2 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing2 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆2 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding3 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机4 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人4 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景4 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui