vue 项目配置跨越

要在vue开发中实现跨域需要先进入到vue项目根目录,找到vue.config.js文件,然后在proxy中设置跨域:

devServer: {

proxy: {

'/api': {

target: `http://47.93.220.246:8300`,

changeOrigin: true,

pathRewrite: {

'^/api': '',

},

},

},

},

在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器

以下是我在开发vue项目中实现跨域的步骤:

1、在proxy中设置要访问的地址,并重写/api为空的字符串,因为我们真正请求的地址是没有带/api,这个重写很重要!!!

2、在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了

3、假如请求的真正地址为:http://47.93.220.246:8300/cloud-auth/auth/,但我们在浏览器上会看到是这样的: http://localhost:8080/api/cloud-auth/auth/ ,多了个/api,但并不影响我们请求数据。

相关推荐
该用户已不存在1 分钟前
免费 SSL 证书缩短至 90 天,你的运维成本还能hold住吗
前端·后端·https
七月十二17 分钟前
【Vite】离线打包@iconify/vue的图标
前端·vue.js
米花丶18 分钟前
解决前端监控上报 Script Error实践
前端·javascript
JarvanMo20 分钟前
如何在 Flutter 应用中大规模实现多语言翻译并妥善处理 RTL(从右到左)布局?
前端
Haha_bj20 分钟前
iOS深入理解事件传递及响应
前端·ios·app
1024小神21 分钟前
用html和css实现放苹果的liquidGlass效果
前端
拜晨21 分钟前
CG-01: 深入理解 2D 变换的数学原理
前端
im_AMBER23 分钟前
Canvas架构手记 07 状态管理 | 组件通信 | 控制反转
前端·笔记·学习·架构·前端框架·react
JarvanMo27 分钟前
理解 Flutter 中的 runApp() 与异步初始化
前端
掘金安东尼27 分钟前
🧭 前端周刊第442期(24–30 Nov 2025)
前端