Uniapp开发H5跨域问题解决

背景故事

还是甲方爸爸,就你事最多。 合作开发一个小程序,提供一个特定的功能。一般来说我们自己干一个小开发是直接原生来写,节约成本就是uniapp开发,一次投入,终身受益的方案。奈何人家是爹,甲方的项目是不分离的项目,使用rem做自适应,PC是这个,H5还是这个。我这边就集成他们的H5,接口地址,两边的url都不一样。关键是领导今天看这个页面可以,按钮放这边,明天看你这个不行,按钮放那边,页面也要不得都得改,每天都在改,你说这着不着得住,着不住嘛,人都要疯。但是呢谁叫我是打工仔呢,觉悟还是要有的,我改,我改,我改改改! 气顺了说说正事,联调的时候,部署到线上这个接口就不通了,会出现跨域问题。就是下面这个图的样子

看多了,一看到这样的就知道跨域了

解决办法

找到你项目根目录的manifest.json文件,找到源码视图,示意图如下:

在你的配置文件增加以下代码: 注意最后不要有,号不然项目报错.改了配置记得重新运行项目。

配置baseUrl,一般请求都会封装,封装的基础路径改成和代理的一样即可

js 复制代码
// 区分环境 ,HbuilderX编辑运行时dev开发环境,发行后自动时生成环境
let baseUrl = {
	env: 'development', // 环境配置 生产环境:production,开发环境:development
	apiVersion: '/v1/services',
	baseUrl:'/h5api',
	// baseUrl: 'http://192.168.2.124:20004',

};

export default baseUrl;

配置的和代理的要一致

json 复制代码
"h5": {
		"router": {
			"mode": "history", //模式不要那个丑的#号
			"base": "/match-wp/" // 项目打包运行的目录名,项目域名不变,目录变的,有需要就是设置这个,跟vue项目一样
		},
		"devServer": {
			"disableHostCheck": true,
			"proxy": {
				"/h5api": {
					"target": "http://192.168.2.131:90", //代理的地址
					"changeOrigin": true, 
					"secure": false,
					"pathRewrite": {
						"^/h5api": "/" //是否替换前缀就是"proxy":下的"/h5api",有些后端接口本身带前缀可以不要这个配置

					}
				}
			}
		}
	}

打完收工

代理配置可以参考vue官方的说明:cli.vuejs.org/zh/config/#...

相关推荐
2501_915918411 小时前
Web 前端可视化开发工具对比 低代码平台、可视化搭建工具、前端可视化编辑器与在线可视化开发环境的实战分析
前端·低代码·ios·小程序·uni-app·编辑器·iphone
程序员的世界你不懂2 小时前
【Flask】测试平台开发,新增说明书编写和展示功能 第二十三篇
java·前端·数据库
索迪迈科技2 小时前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
gnip2 小时前
JavaScript二叉树相关概念
前端
一朵梨花压海棠go2 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
attitude.x3 小时前
PyTorch 动态图的灵活性与实用技巧
前端·人工智能·深度学习
β添砖java3 小时前
CSS3核心技术
前端·css·css3
空山新雨(大队长)3 小时前
HTML第八课:HTML4和HTML5的区别
前端·html·html5
猫头虎-前端技术3 小时前
浏览器兼容性问题全解:CSS 前缀、Grid/Flex 布局兼容方案与跨浏览器调试技巧
前端·css·node.js·bootstrap·ecmascript·css3·媒体