uniapp跨域问题解决方案

uniapp跨域问题解决方案

引言

在使用 uni-app 本地开发 H5> 平台时,需要使用浏览器进行调试,而浏览器会有跨域的问题。比如直接通过本地IP地址去访问开发中的页面,同时这个页面会调一些现有的接口时,就面临着跨域的问题。

解决方案

方案一

manifest.json 去配置 h5.devServer.proxy 解决跨域问题。

直接配置即可解决:要检查 manifest.json 中是否有 h5 相关配置,如果有则直接基于之前的追加配置,如果没有则新增h5如下配置keyvalue全部要用英文双引号 ""引起来。

javascript 复制代码
"h5": {
	"devServer": { // 开发环境
		"proxy": { // 代理转发
			"/api": {
				"target": "https://mock.xxxxx.com/xxxxx", // 以/api 开头的代理到target指定地址 
				"pathRewrite": {
					"^/api": "" 
				}
			}
		}
	}
},

方案二

在项目根目录直接创建一个 vue.config.js 文件,并在里面配置 devServer ,直接上代码

javascript 复制代码
module.exports = {
	devServer: { // 开发环境
		proxy: { // 代理转发
			'/api': {
				target: ' https://mock.xxx.com/mock/63fcbc2d7c016026ff2b8cd8/education-app', // 以/api 开头的代理到target指定地址
				pathRewrite: {
					'^/api': '' // 其中请求地址开头的 /api 替换为 ''
				}
			}
		}
	}
}

最终效果:

注意:以上两种方案不能同时使用,第一种会覆盖第二种方案。

完结~

相关推荐
小徐_23332 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
iOS阿玮6 小时前
永远不要站在用户的对立面,挑战大众的公知。
uni-app·app·apple
xw57 小时前
uni-app中v-if使用”异常”
前端·uni-app
!win !8 小时前
uni-app中v-if使用”异常”
前端·uni-app
2501_9159184110 小时前
iOS 上架全流程指南 iOS 应用发布步骤、App Store 上架流程、uni-app 打包上传 ipa 与审核实战经验分享
android·ios·小程序·uni-app·cocoa·iphone·webview
00后程序员张12 小时前
iOS App 混淆与加固对比 源码混淆与ipa文件混淆的区别、iOS代码保护与应用安全场景最佳实践
android·安全·ios·小程序·uni-app·iphone·webview
00后程序员张1 天前
详细解析苹果iOS应用上架到App Store的完整步骤与指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬1 天前
uniapp-微信小程序分享功能-onShareAppMessage
微信小程序·小程序·uni-app
2501_915106321 天前
Xcode 上传 ipa 全流程详解 App Store 上架流程、uni-app 生成 ipa 文件上传与审核指南
android·macos·ios·小程序·uni-app·iphone·xcode
xkxnq1 天前
Uniapp崩溃监控体系构建:内存泄漏三维定位法(堆栈/资源/线程)
uni-app