关于uni-app:uniapp项目中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, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

uni-app 我的项目中 H5 跨域小程序不跨域怎么解决办法（兼容 H5、小程序）