快捷導(dǎo)航

UniApp?WebView頁面中的請(qǐng)求跨域問題解決

更新時(shí)間：2024年10月02日 11:02:05 作者：龍三元的臭寶

在使用UniApp開發(fā)中,通過WebView組件加載本地網(wǎng)頁時(shí),往往會(huì)遇到跨域問題,下面這篇文章主要介紹了UniApp?WebView頁面中的請(qǐng)求跨域問題解決的相關(guān)資料,需要的朋友可以參考下

一、概述

UniApp中的WebView組件可以使用本地網(wǎng)頁和網(wǎng)絡(luò)網(wǎng)頁。

使用本地網(wǎng)頁的過程中，發(fā)送請(qǐng)求，會(huì)出現(xiàn)跨域問題，并且通過抓包會(huì)發(fā)現(xiàn)Origin請(qǐng)求頭的值為"null"。

請(qǐng)求示例代碼

// 創(chuàng)建xhr對(duì)象
var xhr = new XMLHttpRequest();
// 創(chuàng)建一個(gè) PUT 請(qǐng)求，采用異步
xhr.open('PUT', 'http://192.168.1.47:8086/load_balance/test', true);
// 注冊(cè)相關(guān)事件
xhr.onload = (event) => { 
  console.log("event=====", event)
};
xhr.onerror = (error) => { 
    console.log("error=========", error)
};
// 發(fā)送請(qǐng)求
xhr.send();

二、解決方案

上述示例代碼中，如果后端不做跨域處理，請(qǐng)求則無法正常訪問，到底為什么會(huì)出現(xiàn)跨域問題呢，而且Origin請(qǐng)求頭的值為什么這么奇怪。

其實(shí)我們可以通過查看瀏覽器地址欄信息得到答案，通過打印window.location.href的值，我們可以看到如下結(jié)果

查看地址欄的值

console.log("window.location.href====", window.location.href);
// window.location.href==== file:///var/mobile/Containers/Data/Application/7084A02A-514F-4B7B-A966-F610315939C1/Documents/Pandora/apps/B01189FFE7E81940832DDC748B2EDE9E/www/hybrid/html/index.html

我們可以發(fā)現(xiàn)，本地網(wǎng)頁是通過file://協(xié)議進(jìn)行訪問的，并不是http協(xié)議，所以當(dāng)我們發(fā)送http請(qǐng)求時(shí)，這個(gè)請(qǐng)求并不符合同源策略。

由于file協(xié)議中沒有域名和端口之類的信息，所以Origin請(qǐng)求頭的值會(huì)為"null"。

知道原因之后，我們其實(shí)可以通過讓后端設(shè)置允許"null"跨域即可，不過這樣做會(huì)感覺奇奇怪怪的。

還有一種方式，可以直接在前端解決掉這個(gè)問題，不需要用到后端。

就是使用5+API中的plus.net.XMLHttpRequest對(duì)象，這個(gè)請(qǐng)求對(duì)象就是專門用來解決跨域問題的。

所以，讓我們來修改上述示例代碼。

請(qǐng)求示例代碼（不會(huì)觸發(fā)跨域）

// 記得要在plusready事件完成之后才能調(diào)用plus對(duì)象
document.addEventListener('plusready', () =>{
    // 使用plus.net.XMLHttpRequest創(chuàng)建xhr對(duì)象
    var xhr = new plus.net.XMLHttpRequest();
    // 創(chuàng)建一個(gè) PUT 請(qǐng)求，采用異步
    xhr.open('PUT', 'http://192.168.1.47:8086/load_balance/test', true);
    // 注冊(cè)相關(guān)事件
    xhr.onload = (event) => {
        console.log("event=====", event)
    };
    xhr.onerror = (error) => {
        console.log("error=========", error)
    };
    // 發(fā)送請(qǐng)求
    xhr.send();
})

用了plus.net.XMLHttpRequest對(duì)象之后，便不會(huì)出現(xiàn)跨域問題了。

總結(jié)

到此這篇關(guān)于UniApp WebView頁面中的請(qǐng)求跨域問題解決的文章就介紹到這了,更多相關(guān)UniApp WebView頁面請(qǐng)求跨域內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: