uni-app开发h5跨域问题

最近用 uni-app 开发 h5(公众号) 发现一个问题, 如果用 uni-app 内置的浏览器访问项目的接口能正常访问, 但是当用到 Chrome 浏览器或 Firefox 浏览器就会出现大家非常常见的跨域问题
好了废话不多说, 来看看是怎么解决用 uni-app 解决 h5 中常见的跨域问题

先从根目录中的 manifest.json 点击进入

在这里插入图片描述
在这里插入图片描述
在找到源码视图进入找到 devServer 然后输入一下设置即可

        "devServer" : {
            "https" : true, // 是否启用 https 协议
            "proxy" : {
                "/api" : {
                    "target" : "https://xxxx.com",  // 域名
                    "changeOrigin" : true,
                    "secure" : true,
                    "pathRewrite" : {
                        "^/api" : ""
                    }
                }
            }
        }

最在自己的 uni.request()或者自己封装的请求接口下面加上一下代码即可

uni.request({
    url: "/api" + "/xx/xx", // 前面加入在 devServer 中写的 /api 后面根据自己的文档写接口即可
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

这样就解决了 h5(公众号) 的跨域问题啦


版权声明:本文为bobo979520原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。