使用webView的时候,出现Error loading page Domain:WebKitErrorDomain Error Code:101 Description: The URL can't...

博客给出了解决WebKitErrorDomain code:101警告的代码。通过定义onShouldStartLoadWithRequest函数,对URL的协议进行判断,若为http或https则返回true,否则返回false。代码转载自相关博客。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

onShouldStartLoadWithRequest = (e) => {
// Implement any custom loading logic here, don't forget to return!
// 解决WebKitErrorDomain code:101的警告
// http://leonhwa.com/blog/0014905236320002ebb3db97fe64fb3bb6f047eafb1c5de000
var scheme = e.url.split('://')[0]
if (scheme === 'http' || scheme === 'https') {
return true
}
return false
};

转载于:https://www.cnblogs.com/jkr666666/p/10571878.html

{ "name" : "清廉其亚", "appid" : "__UNI__772DBEF", "description" : "", "versionName" : "1.0.0", "versionCode" : "100", "transformPx" : false, /* 5+App特有相关 */ "app-plus" : { "usingComponents" : true, "nvueStyleCompiler" : "uni-app", "compilerVersion" : 3, "splashscreen" : { "alwaysShowBeforeRender" : true, "waiting" : true, "autoclose" : true, "delay" : 0 }, /* 模块配置 */ "modules" : {}, /* 应用发布信息 */ "distribute" : { /* android打包配置 */ "android" : { "permissions" : [ "<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>", "<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>", "<uses-permission android:name=\"android.permission.VIBRATE\"/>", "<uses-permission android:name=\"android.permission.READ_LOGS\"/>", "<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>", "<uses-feature android:name=\"android.hardware.camera.autofocus\"/>", "<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>", "<uses-permission android:name=\"android.permission.CAMERA\"/>", "<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>", "<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>", "<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>", "<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>", "<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>", "<uses-feature android:name=\"android.hardware.camera\"/>", "<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>" ] }, /* ios打包配置 */ "ios" : {}, /* SDK配置 */ "sdkConfigs" : {} } }, /* 快应用特有相关 */ "quickapp" : {}, /* 小程序特有相关 */ "mp-weixin" : { "appid" : "", "setting" : { "urlCheck" : false }, "usingComponents" : true }, "mp-alipay" : { "usingComponents" : true }, "mp-baidu" : { "usingComponents" : true }, "mp-toutiao" : { "usingComponents" : true }, "uniStatistics" : { "enable" : false }, "vueVersion" : "3", "fallbackLocale" : "zh-Hans", "h5" : { "title" : "清廉其亚", "router" : { "mode" : "history" }, "devServer": { "port": 8080, // 端口 "disableHostCheck": true, "proxy": { "/api": { "target": "http://172.26.26.34:8080", // 目标服务器地址 "changeOrigin": true, "secure": false, // 如果是https,需要设置为true "pathRewrite": { "^/api": "" // 重写路径,去掉请求路径中的/api } } } } } } 这个是manifest.json 配置代码,但是<template> <view class="page-container"> <view class="header-title"> <text>欢迎来到清廉其亚</text> </view> <!-- 轮播图区域 --> <view class="banner-container"> <!-- 加载状态提示 --> <view v-if="loading" class="loading-container"> <image src="/static/loading.gif" class="loading-icon" /> <text class="loading-text">轮播图数据加载中...</text> </view> <!-- 轮播图内容 --> <swiper v-else class="banner-swiper" :autoplay="true" :interval="3000" :circular="true" :indicator-dots="true" > <swiper-item v-for="(item, index) in banners" :key="index" class="swiper-item"> <image :src="item.image" mode="aspectFill" class="banner-image" /> <view class="banner-text"> <text class="banner-title">{{ item.title }}</text> <text class="banner-description">{{ item.description }}</text> </view> </swiper-item> </swiper> </view> <!-- 图标菜单区域 - 添加内部滚动 --> <view class="icon-menu-container"> <view class="section-title"> <text>清廉服务</text> </view> <!-- 内部滚动容器 --> <scroll-view class="scroll-container" scroll-y :show-scrollbar="false" :enhanced="true" :bounces="false" > <view class="icon-grid"> <view v-for="(item, index) in iconMenus" :key="index" class="icon-item" @click="navigateTo(item)" > <image :src="item.icon" class="icon-image" /> <text class="icon-text">{{ item.text }}</text> </view> </view> </scroll-view> </view> </view> </template> <script setup> import { ref, onMounted } from 'vue'; // 轮播图数据 - 初始为空数组 const banners = ref([]); const loading = ref(true); const lastUpdated = ref(''); // 图标菜单数据 const iconMenus = ref([ { icon: '/static/icons/ServiceHall.png', text: '服务大厅', name: '服务大厅', path: '/pages/WebView/WebView' }, { icon: '/static/icons/IntegrityCulture.png', text: '廉洁文化', name: '廉洁文化', path: '/pages/IntegrityCulture/IntegrityCulture' }, { icon: '/static/icons/IntegrityStandards.png', text: '廉洁标准', name: '廉洁标准', path: '/pages/IntegrityStandards/IntegrityStandards' }, { icon: '/static/icons/ComplaintChannel.png', text: '投诉渠道', name: '投诉渠道', path: '/pages/ComplaintChannel/ComplaintChannel' }, { icon: '/static/icons/ComplainCases.png', text: '投诉案例', name: '投诉案例', path: '/pages/ComplainCases/ComplainCases' }, { icon: '/static/icons/ComplaintRecord.png', text: '投诉记录', name: '投诉记录', path: '/pages/ComplaintRecord/ComplaintRecord' }, { icon: '/static/icons/OnlinComplaint.png', text: '在线投诉', name: '在线投诉', path: '/pages/OnlinComplaint/OnlinComplaint' } ]); // 获取轮播图数据 const fetchBanners = async () => { loading.value = true; try { // 使用POST方法调用API const response = await uni.request({ url: '/api/incorruptFront/public/index', method: 'POST', timeout: 10000, header: { 'Content-Type': 'application/json' }, data: { // 添加必要的请求参数(根据API文档) // 例如: page: 1, size: 10 } }); // 处理响应数据 console.log('API响应:', response); if (response && response.length >= 2) { const res = response[1]; // uni.request 返回 [err, res] // 检查响应状态码和数据格式 if (res && res.statusCode === 200 && res.data && res.data.code === 200) { // 提取所需字段,根据提供的JSON结构 banners.value = res.data.data.map(item => ({ image: item.imageUrl, // 图片URL title: item.imageTitle, // 图片标题 description: item.imageText // 图片描述文本 })); console.log('成功获取轮播图数据:', banners.value); return; // 成功获取数据,直接返回 } else if (res && res.data && res.data.msg) { console.error('API返回错误:', res.data.msg); // 显示错误提示 uni.showToast({ title: `API错误: ${res.data.msg}`, icon: 'none', duration: 3000 }); } } // 不使用默认数据,保持空数组 banners.value = []; } catch (error) { console.error('获取轮播图数据失败:', error); // 显示错误提示 uni.showToast({ title: '网络请求失败,请检查连接', icon: 'error', duration: 2000 }); banners.value = []; } finally { loading.value = false; lastUpdated.value = new Date().toLocaleString(); } }; // 组件挂载时获取数据 onMounted(() => { fetchBanners(); }); // 导航方法 const navigateTo = (item) => { uni.navigateTo({ url: item.path, // 使用配置的路径 fail: (err) => console.error('跳转失败', err) }); }; </script> 这段代码还是有报错:Access to XMLHttpRequest at 'http://localhost:9500/' from origin 'http://172.26.26.38:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. uni-h5.es.js:20597 GET http://localhost:9500/ net::ERR_FAILED 200 (OK) (匿名) @ uni-h5.es.js:20597 (匿名) @ uni-h5.es.js:3069 invokeApi @ uni-h5.es.js:2917 (匿名) @ uni-h5.es.js:2935 (匿名) @ runtime.es.js:134 setTimeout (匿名) @ runtime.es.js:133 index.vue:125 POST http://172.26.26.38:5173/api/incorruptFront/public/index 404 (Not Found)
最新发布
08-16
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值