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

相关推荐
测试界柠檬几秒前
面试真题 | web自动化关闭浏览器,quit()和close()的区别
前端·自动化测试·软件测试·功能测试·程序人生·面试·自动化
多多*1 分钟前
OJ在线评测系统 登录页面开发 前端后端联调实现全栈开发
linux·服务器·前端·ubuntu·docker·前端框架
2301_801074152 分钟前
TypeScript异常处理
前端·javascript·typescript
小阿飞_3 分钟前
报错合计-1
前端
caperxi5 分钟前
前端开发中的防抖与节流
前端·javascript·html
霸气小男5 分钟前
react + antDesign封装图片预览组件(支持多张图片)
前端·react.js
susu10830189116 分钟前
前端css样式覆盖
前端·css
学习路上的小刘7 分钟前
vue h5 蓝牙连接 webBluetooth API
前端·javascript·vue.js
&白帝&7 分钟前
vue3常用的组件间通信
前端·javascript·vue.js
小白小白从不日白18 分钟前
react 组件通讯
前端·react.js