UniApp-WebView页面中的请求跨域问题

一、概述

UniApp中的WebView组件可以使用本地网页和网络网页。

使用本地网页的过程中，发送请求，会出现跨域问题，并且通过抓包会发现

Origin

请求头的值为

"null"

。

请求示例代码

// 创建xhr对象var xhr =newXMLHttpRequest();// 创建一个 PUT 请求，采用异步
xhr.open('PUT','http://192.168.1.47:8086/load_balance/test',true);// 注册相关事件
xhr.onload=(event)=>{ 
  console.log("event=====", event)};
xhr.onerror=(error)=>{ 
    console.log("error=========", error)};// 发送请求
xhr.send();

二、解决方案

上述示例代码中，如果后端不做跨域处理，请求则无法正常访问，到底为什么会出现跨域问题呢，而且

Origin

请求头的值为什么这么奇怪。

其实我们可以通过查看浏览器地址栏信息得到答案，通过打印

window.location.href

的值，我们可以看到如下结果

查看地址栏的值

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

我们可以发现，本地网页是通过file://协议进行访问的，并不是http协议，所以当我们发送http请求时，这个请求并不符合同源策略。

由于file协议中没有域名和端口之类的信息，所以

Origin

请求头的值会为

"null"

。

知道原因之后，我们其实可以通过让后端设置允许"null"跨域即可，不过这样做会感觉奇奇怪怪的。

还有一种方式，可以直接在前端解决掉这个问题，不需要用到后端。

就是使用5+API中的

plus.net.XMLHttpRequest

对象，这个请求对象就是专门用来解决跨域问题的。

所以，让我们来修改上述示例代码。

请求示例代码（不会触发跨域）

// 记得要在plusready事件完成之后才能调用plus对象
document.addEventListener('plusready',()=>{// 使用plus.net.XMLHttpRequest创建xhr对象var xhr =newplus.net.XMLHttpRequest();// 创建一个 PUT 请求，采用异步
    xhr.open('PUT','http://192.168.1.47:8086/load_balance/test',true);// 注册相关事件
    xhr.onload=(event)=>{
        console.log("event=====", event)};
    xhr.onerror=(error)=>{
        console.log("error=========", error)};// 发送请求
    xhr.send();})

用了

plus.net.XMLHttpRequest

对象之后，便不会出现跨域问题了。