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