UniApp?WebView頁面中的請求跨域問題解決

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

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

一、概述

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

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

請求示例代碼

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

二、解決方案

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

其實(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請求時(shí)，這個(gè)請求并不符合同源策略。

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

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

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

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

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

請求示例代碼（不會觸發(fā)跨域）

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

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