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

 更新时间:2024年10月02日 11:02:05   作者:龙三元的臭宝  
在使用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页面请求跨域内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Javascript通过控制类名更改样式

    Javascript通过控制类名更改样式

    这篇文章主要介绍了Javascript通过控制类名更改样式,下面来和小编一起来学习吧
    2019-05-05
  • 你可能不知道的package.json属性详解

    你可能不知道的package.json属性详解

    package.json俗称依赖配置文件(我自己取的名),最主要的作用就是管理项目中所用到的依赖,下面这篇文章主要给大家介绍了关于package.json属性的相关资料,需要的朋友可以参考下
    2022-02-02
  • echarts修改横坐标颜色简单代码示例

    echarts修改横坐标颜色简单代码示例

    这篇文章主要给大家介绍了关于echarts修改横坐标颜色的相关资料,在项⽬中常常会⽤到echarts的实例,根据不同的需求字体颜⾊需要变化,需要的朋友可以参考下
    2023-07-07
  • FireBug 调试JS入门教程 如何调试JS

    FireBug 调试JS入门教程 如何调试JS

    这篇文章主要为大家介绍下通过firefox的FireBug调试JS,需要的朋友可以参考下
    2013-12-12
  • javascript运行机制之执行顺序理解

    javascript运行机制之执行顺序理解

    这篇文章主要介绍了javascript运行机制之执行顺序理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-08-08
  • 从表单校验看JavaScript策略模式的使用详解

    从表单校验看JavaScript策略模式的使用详解

    这篇文章主要介绍了从表单校验看JavaScript策略模式的使用,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-10-10
  • javascript回调函数的概念理解与用法分析

    javascript回调函数的概念理解与用法分析

    这篇文章主要介绍了javascript回调函数的概念理解与用法,结合具体实例形式分析了javascript回调函数的功能、原理、使用方法与相关注意事项,需要的朋友可以参考下
    2017-05-05
  • 前端js sm2实现加密简单代码举例

    前端js sm2实现加密简单代码举例

    在Vue项目中实现数据加密,首先需要安装SM2加密库,如js-sm2或sm-crypto,通过npm或yarn进行安装后,在Vue组件或文件中引入该库,并使用其提供的加密、解密功能,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-09-09
  • JavaScript实现网站访问次数统计代码

    JavaScript实现网站访问次数统计代码

    每个网站管理者,都必须知道每天有多少人访问了本站,需要一个网站访问次数功能来满足需求,本篇文章主要介绍了JavsScript实现网站访问次数统计代码,需要的朋友可以参考下
    2015-08-08
  • JavaScript高级程序设计 读书笔记之八 Function类及闭包

    JavaScript高级程序设计 读书笔记之八 Function类及闭包

    Function类及闭包,学习js的朋友可以参考下
    2012-02-02

最新评论