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

相关推荐
bitbitDown5 分钟前
重构缓存时踩的坑:注释了三行没用的代码却导致白屏
前端·javascript·vue.js
xiaopengbc9 分钟前
火狐(Mozilla Firefox)浏览器离线安装包下载
前端·javascript·firefox
用户0165238444129 分钟前
Webpack5 入门与实战,前端开发必备技能无密
前端
小高00730 分钟前
🔥🔥🔥前端性能优化实战手册:从网络到运行时,一套可复制落地的清单
前端·javascript·面试
古夕32 分钟前
my-first-ai-web_问题记录01:Next.js的App Router架构下的布局(Layout)使用
前端·javascript·react.js
Solon阿杰36 分钟前
前端(react/vue)实现全景图片(360°)查看器
javascript·vue.js
杨超越luckly38 分钟前
HTML应用指南:利用POST请求获取上海黄金交易所金价数据
前端·信息可视化·金融·html·黄金价格
Jerry43 分钟前
Compose 中的基本布局
前端
Hilaku1 小时前
深入WeakMap和WeakSet:管理数据和防止内存泄漏
前端·javascript·性能优化
Juchecar1 小时前
常见的 HTML 标签及 CSS 选择器速查表
前端