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

相关推荐
不吃香菜的猪2 分钟前
Vue3的组件通信方式
前端·javascript·vue.js
香蕉可乐荷包蛋30 分钟前
vue3中ref和reactive的使用、优化
前端·javascript·vue.js
耶啵奶膘41 分钟前
css——width: fit-content 宽度、自适应
前端·css
OEC小胖胖43 分钟前
前端框架状态管理对比:Redux、MobX、Vuex 等的优劣与选择
前端·前端框架·web
字节架构前端2 小时前
k8s场景下的指标监控体系构建——Prometheus 简介
前端·架构
奕羽晨2 小时前
关于CSS的一些读书笔记
前端·css
Poetry2372 小时前
大屏数据可视化适配方案
前端
好学且牛逼的马2 小时前
vue3笔记
vue.js
遂心_2 小时前
用React Hooks + Stylus打造文艺范的Todo应用
前端·javascript·react.js