共计 836 个字符,预计需要花费 3 分钟才能阅读完成。
uni-app 我的项目中 H5 跨域小程序不跨域怎么解决办法(兼容 H5、小程序)
1. 开发环境 uni-app
2. 电脑系统 windows10 专业版
3. 在应用 uni-app 开发的过程中, 咱们在 h5 端会存在跨域的问题, 在小程序中是没有跨域的, 然而怎么同时兼容 h5 和小程序呢? 在这里我抉择应用 uni-app 中的条件编译, 上面我来分享一下具体方法, 心愿对你有所帮忙!
4. 首先配置 h5 端跨域解决办法, 在 manifest.json 中增加如下如下代码:
"h5": {
"devServer": {
"port" : 9008, // 端口号
"disableHostCheck": true,
"proxy": {
"/api": {
"target": "http://192.168.137.78:3000", // 指标接口域名
"changeOrigin": true, // 是否跨域
"secure": false, // 设置反对 https 协定的代理
"pathRewrite": {"^/api": "" // 通过 pathRewrite 重写地址,将前缀 /api 转为 /}
}
}
}
},
// 留神: 增加的代码和 app-plus 是同级的关系!
5. 后盾接口地址为:
http://192.168.137.78:3000/feng
6. 在 mounted 中增加如下代码:
mounted() {
// #ifdef H5
// 在 h5 端执行的代码
uni.request({
url:'/api/feng', 申请接口
method:'post', // 申请办法
data:this.ChenindexconOnj, // 传递的参数
success:(res)=>{console.log(res); // 输入 申请胜利的数据
},
})
// #endif
// #ifdef MP-WEIXIN
// 在微信小城中执行的代码
this.chenget();
// #endif
},
7. 在 h5 端成果为:
8. 在小程序端成果为:
9. 本期的分享到了这里就完结啦, 是不是很 nice, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!
正文完