怎么在uniapp中利用H5實(shí)現(xiàn)https跨域請(qǐng)求？很多新手對(duì)此不是很清楚，為了幫助大家解決這個(gè)難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來(lái)學(xué)習(xí)下，希望你能有所收獲。愛(ài)掏網(wǎng) - it200.com
什么是跨域
跨域是瀏覽器的專用概念，指js代碼訪問(wèn)自己來(lái)源站點(diǎn)之外的站點(diǎn)。愛(ài)掏網(wǎng) - it200.com比如A站點(diǎn)網(wǎng)頁(yè)中的js代碼，請(qǐng)求了B站點(diǎn)的數(shù)據(jù)，就是跨域。愛(ài)掏網(wǎng) - it200.com
A和B要想被認(rèn)為是同域，則必須有相同的協(xié)議（比如http和https就不行）、相同域名、和相同端口號(hào)（port）。愛(ài)掏網(wǎng) - it200.com
如果你是做App、小程序等非H5平臺(tái)，是不涉及跨域問(wèn)題的。愛(ài)掏網(wǎng) - it200.com
由于uni-app是標(biāo)準(zhǔn)的前后端分離模式，開(kāi)發(fā)h6應(yīng)用時(shí)如果前端代碼和后端接口沒(méi)有部署在同域服務(wù)器，就會(huì)被瀏覽器報(bào)跨域。愛(ài)掏網(wǎng) - it200.com
本文主要介紹uniapp H5開(kāi)發(fā)中，本地調(diào)試https的接口實(shí)現(xiàn)跨域請(qǐng)求
源碼視圖
"h6"?:?{
????"title"?:?"",
????"domain"?:?"",
????"router"?:?{
??????"mode"?:?"hash",
??????"base"?:?"/h6/"
????},
????"devServer"?:?{
//?"https"?:?true,
"proxy":{
"/api":?{ ???????
"target":"https://域名/api",
"changeOrigin":?true,//是否跨域
"secure":?true,//?設(shè)置支持https協(xié)議的代理
"pathRewrite":{"^/api":""}
}
}
????}
??}
接口請(qǐng)求
uni.request({
????//?url:?ApiUrl?+?opt.url,
url:?&＃39;/api&＃39;?+?opt.url,
????data:?data,
????method:?opt.method,
????header:?opt.header,
????dataType:?&＃39;json&＃39;,
????success:?function?(res)?{
if(res.data.code==&＃39;401&＃39;){
uni.showToast({
??title:?res.data.msg,
icon:?&＃39;none&＃39;
});
uni.navigateTo({
url:?&＃39;/pages/me/login&＃39;
});
}?else?{
opt.success(res);
}
????},
????fail:?function?(res)?{
uni.hideLoading();
//?opt.fail(res);
??????uni.showToast({
????????title:?&＃39;網(wǎng)絡(luò)異常&＃39;,
icon:&＃39;none&＃39;
??????});
????}
??})
如此這般，跨域功成。愛(ài)掏網(wǎng) - it200.com
問(wèn)題引申
有小伙伴問(wèn)uniapp客戶端對(duì)接第三方，uniapp這邊我用的是https，但是第三方用的http，請(qǐng)問(wèn)這種該如何去解決跨域問(wèn)題呢？
//?思路和vue是一樣的
1、安裝vue?jsonp
npm?i?-S?vue-jsonp
//?引入vue-jsonp?解決服務(wù)跨域請(qǐng)求問(wèn)題
2、在main.js中導(dǎo)入vue-jsonp
import?{VueJsonp}?from?&＃39;vue-jsonp&＃39;
Vue.use(VueJsonp);
看完上述內(nèi)容是否對(duì)您有幫助呢？如果還想對(duì)相關(guān)知識(shí)有進(jìn)一步的了解或閱讀更多相關(guān)文章，請(qǐng)關(guān)注編程筆記行業(yè)資訊頻道，感謝您對(duì)編程筆記的支持。愛(ài)掏網(wǎng) - it200.com