uni-app项目中H5跨域小程序不跨域怎么解决方法(兼容H5、小程序)

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端效果为:
image.png
9.本期的分享到了这里就结束啦,是不是很nice,希望对你有所帮助,让我们一起努力走向巅峰!

你可能感兴趣的