美文网首页
uni-app 本地访问接口跨域

uni-app 本地访问接口跨域

作者: yichen_china | 来源:发表于2021-06-17 16:42 被阅读0次

    uni-app 本地访问接口跨域

    uni-app在本地访问接口跨域,可进行如下配置:

    需要在manifest.json的源码中找到h5,添加以下代码:

    "devServer" : {
                "proxy" : {
                    "/dpc" : {
                        "target" : "****", //域名
                        "changeOrigin" : true,
                        "secure" : false,
                        "pathRewrite" : {
                            "^/dpc" : ""
                        }
                    }
                },
                "https" : true
            },
    

    其中

    target接口访问的域名
    pathRewrite为接口重定向
    https 是否是https的

    然后在请求接口的时候需要将/dcp/,重定向的路径加到访问接口的域名中;

    如下https.js:

    const baseUrl = 'https://***';  //接口请求域名
    const httpRequest = (opts, data) => {
        var httpDefaultOpts = {
            url: "/dpc/"+opts.url, //本地访问时开启
            // url: baseUrl+opts.url, //线上环境中开启
            data: data,
            beforeSend :function(xmlHttp){
                xmlHttp.setRequestHeader("If-Modified-Since","0"); 
                xmlHttp.setRequestHeader("Cache-Control","no-cache");
            },
            method: opts.method,
            header: opts.method == 'GET' ? {
            'X-Requested-With': 'XMLHttpRequest',
            "Accept": "application/json",
            "Content-Type": "application/json; charset=UTF-8"
        } : {
           'content-type': 'application/x-www-form-urlencoded'
        },
            dataType: 'json',
        }
        var promise = new Promise(function(resolve, reject) {
            uni.request(httpDefaultOpts).then(
                (res) => {
                    resolve(res[1])
                }
            ).catch(
                (response) => {
                    reject(response)
                }
            )
        })
        return promise
    };
    export default {
        baseUrl,
        httpRequest,
    }
    

    在本地浏览器中,接口地址为 url: "/dpc/"+opts.url,

    在线上访问时,需要将接口地址切换回来 url: baseUrl+opts.url,

    <pre style="margin: 0px; padding: 0px; overflow: auto; color: rgb(57, 57, 57); font-size: 14px; font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-align: left; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; background-color: rgb(250, 247, 239); text-decoration-style: initial; text-decoration-color: initial;">https.js在main.js中全局配置后就可以在整个项目中使用;

    如下图,访问出的接口地址是</pre>

    image

    请求地址会变成 https://localhost:8080/dpc/*****

    而请求的状态是成功;

    至此成功解决uni-app本地接口访问跨域的问题;

    相关文章

      网友评论

          本文标题:uni-app 本地访问接口跨域

          本文链接:https://www.haomeiwen.com/subject/vtbcyltx.html