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,但并不影响我们请求数据。

相关推荐
Aaron_Feng几秒前
一个小工具解决Swift Actor重入问题
前端
笨笨狗吞噬者几秒前
维护 uniapp 小程序端近一年,我想拉一个开发者交流群
前端·程序员·uni-app
前端炒粉7 分钟前
React 面试高频题
前端·react.js·面试
程序员陆业聪8 分钟前
让 Android 里的 AI 真正「干活」:Function Calling 工程实现全解
前端
mumuWorld10 分钟前
解决openclaw以及插件安装的报错
前端·ai编程
GISer_Jing11 分钟前
前端组件库——shadcn/ui:轻量、自由、可拥有,解锁前端组件库的AI时代未来
前端·人工智能·ui
执行部之龙15 分钟前
JS手写——call bind apply
前端·javascript
京东零售技术16 分钟前
告别手动搬砖: JoyCode + i18n-mcp 实现前端项目多语言自动化
前端
李少兄16 分钟前
企业资源计划(ERP)系统全景指南
java·前端·数据库·erp
张一凡9320 分钟前
React 项目也能用依赖注入?我尝试了一下,真香
前端·react.js