uni-app 本地访问接口跨域

2021-06-17  本文已影响0人  yichen_china

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本地接口访问跨域的问题;

上一篇下一篇

猜你喜欢

热点阅读