uniapp 解决 H5 跨域问题

使用 uniapp 开发 H5 应用时,若后端没有配置请求域名白名单则接口会出现 CORS 跨域问题,示例如下:

Access to XMLHttpRequest at 'http://www.baidu.cn/api/login' from origin 'http://localhost:5054' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

此时前端可通过如下步骤配置解决此问题:

配置manifest.json文件

找到项目根目录中的 manifest.json 文件,打开该文件点击"源码视图 ",在第一对 {} 中对 H5 平台配置代理服务器:

javascript 复制代码
"h5": {
		"devServer": {
			"port": 5054, // 可自行修改,不和其他项目冲突即可(修改后需重新运行项目)
			"disableHostCheck": true,
			"proxy": {
				// 配置代理服务器来解决跨域问题,uniapp不适用CORS方案和设置JSONP方案
				"/api/": {
					// 映射域名
					"target": "http://www.baidu.cn", // 目标接口路径
					"changeOrigin": true,
					"secure": false,
					"pathRewrite": {
						"^/api": ""
					}
				}
			}
		},
		"optimization": {
			"treeShaking": {
				"enable": true
			}
		}
	}

配置请求文件的baseURL

还需要再修改项目中的全局请求的根域名,假设你的项目中全局的接口请求配置文件为 request.js 文件,示例代码如下:

javascript 复制代码
// 初始化请求配置
uni.$u.http.setConfig((config) => {
	/* config 为默认全局配置*/
	// config.baseURL 用于配置项目请求的根域名
	// #ifdef H5
	config.baseURL = `http://192.168.0.2:5054/`; /* H5 平台需要使用本机IPV4+端口号的本地路径 */
	// #endif
	// #ifndef H5
	config.baseURL = `http://www.baidu.cn/`; /* 非 H5 平台则直接使用接口路径 */
	// #endif
	// 其他配置...
	config.custom.toast = true // 默认消息有msg会显示出来
	return config
})

注1:以上 request.js 文件的全局请求配置写法来源于 uview-plus 框架的 http 请求的全局配置示例。

注2:若需示例中的源码可访问 码云 uniapp-vue3-js 项目开发模板

相关推荐
芥子沫4 小时前
VSCode添加Python、Java注释技巧、模板
开发语言·前端·javascript
cos4 小时前
FE Bits 前端周周谈 Vol.2|V8 提速 JSON.stringify 2x,Vite 周下载首超 Webpack
前端·javascript·css
YuShiYue5 小时前
【uni-app】解决在 h5 环境下会出现双标题问题
uni-app
Ares-Wang5 小时前
Node.js 》》bcryptjs 加密
开发语言·javascript·node.js
wfsm5 小时前
pdf预览Vue-PDF-Embed
前端
wangbing11255 小时前
界面规范的其他框架实现-列表-layui实现
前端·javascript·layui
最爱吃南瓜5 小时前
JS逆向实战案例之----【通姆】252个webpack模块自吐
开发语言·javascript·爬虫·webpack·js逆向·算法模拟
Hurry65 小时前
web应用服务器tomcat
java·前端·tomcat
zhanshuo6 小时前
深度揭秘:如何在单页应用(SPA)中完美保留路由切换滚动位置,提升用户体验!
javascript
烛阴6 小时前
Sin -- 重复的、流动的波浪
前端·webgl