Vue后台管理项目中解决需要配置多个端口号问题
背景
登录接口:http://39.98.123.211:8170/
商品接口:http://39.98.123.211:8510/
可见前面是地址是一致的,但是端口号不一样。
这就会导致,登录进得去,但是获取数据的时候,没有办法取数据;或者登录不进,但是数据取得到。无论哪一种都不是我们想要的。
项目中,教程代码写的如下:
在vue.config.js中配置跨域代理
proxy: {
'/dev-api': {
target: 'http://39.98.123.211:8170',
pathRewrite: { '^/dev-api': '' },
},
用axios封装了一个request.js:
// create an axios instance
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
.env.development中:可见其是拼接了VUE_APP_BASE_API这个路径:我们写什么他自动给我们拼接上去。
解决
经过前辈指点改写代码如下:
不采用教程里拼接简写这种写法了。
在vue.config.js中配置跨域代理
// 配置代理跨域
proxy: {
'/dev-api': {
target: 'http://39.98.123.211:8170',
pathRewrite: { '^/dev-api': '' },
},
'/dev1-api': {
target: 'http://39.98.123.211:8510',
pathRewrite: { '^/dev1-api': '' },
},
},
request.js:
// create an axios instance
const service = axios.create({
// baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
baseURL: '',
// withCredentials: true, // send cookies when cross-domain requests
timeout: 5000 // request timeout
})
接着在引用到接口的地方各自补充上对应的/dev-api 、/dev1-api
登录部分相关代码:
商品列表部分代码:
最后,因为我们改了vue.config.js配置文件,记得重启服务器!!
最新文章
- HTML <;label>; 标签
- 火狐浏览器,关闭ssl v3防护
- javascript js表示中文日期的经典写法
- 【WinAPI】Windows Message 枚举常量收集
- Java学习IO篇
- VS2012中启动性能分析 独占样本数的分析
- CentOS安装搜狗词库
- ##解决 ViewPager 调用 notifyDataSetChanged()无刷新:原理、解决办法##
- linux使用yum安装mariadb
- Bootstrap的js插件之按钮(button)
- find 命令的误差估值与单位调整
- Wordpress上传资源报HTTP错误
- js正则表达式——数字校验
- JVM内存结构分析
- JVM规范系列第4章:Class文件格式
- [Big Data - ELK] ELK(ElasticSearch, Logstash, Kibana)搭建实时日志分析平台
- 玩linux就是不断的踩坑,踩坑。最近的坑。xpath firefox兼容问题,抓取表格。
- Gravitee.io api gateway 试用
- Git(二)_基本命令
- 面板支持单个,多个元素的jQuery图片轮播插件
热门文章
- D8-16K加密锁配置流程
- 监控系统grafana常见问题合集
- 2022-05-10内部群每日三题-清辉PMP
- Springcloud gateway整合(集成)swagger2+finfe4j踩坑
- kali linux 中实现beef和msf关联出现问题解决
- RockyLinux8.7 制作OpenSSH9.2 rpm包
- 初识swoole
- 错误提示“com.alibaba.fastjson.JSONException: exepct &#39;[&#39;, but string, pos 4, json”解决
- 【Java】取n工作日后的日期(仅排除周六周日)
- Linux df -h 显示磁盘空间满,但实际未占用满——问题分析