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

相关推荐
文心快码BaiduComate2 分钟前
WAVE SUMMIT深度学习开发者大会2025举行 文心大模型X1.1发布
前端·后端·程序员
babytiger2 分钟前
python 通过selenium调用chrome浏览器
前端·chrome
passer9819 分钟前
基于webpack的场景解决
前端·webpack
奶昔不会射手22 分钟前
css3之grid布局
前端·css·css3
举个栗子dhy26 分钟前
解决在父元素上同时使用 onMouseEnter和 onMouseLeave时导致下拉菜单无法正常展开或者提前收起问题
前端·javascript·react.js
Coding_Doggy32 分钟前
苍穹外卖前端Day1 | vue基础、Axios、路由vue-router、状态管理vuex、TypeScript
前端
前端与小赵32 分钟前
vue3和vue2生命周期的区别
前端·javascript·vue.js
用户4582031531736 分钟前
10个你可能不知道的实用CSS技巧,立竿见影提升开发效率
前端·css