UniApp WebView页面中的请求跨域问题解决
作者：龙三元的臭宝
在使用UniApp开发中,通过WebView组件加载本地网页时,往往会遇到跨域问题,下面这篇文章主要介绍了UniApp WebView页面中的请求跨域问题解决的相关资料,需要的朋友可以参考下
一、概述
UniApp中的WebView组件可以使用本地网页和网络网页。
使用本地网页的过程中，发送请求，会出现跨域问题，并且通过抓包会发现Origin请求头的值为"null"。
请求示例代码
// 创建xhr对象
var xhr = new 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();
二、解决方案
上述示例代码中，如果后端不做跨域处理，请求则无法正常访问，到底为什么会出现跨域问题呢，而且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 = new plus.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对象之后，便不会出现跨域问题了。
总结
到此这篇关于UniApp WebView页面中的请求跨域问题解决的文章就介绍到这了,更多相关UniApp WebView页面请求跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！