uni-app ios的wkwebview加载本地图片涉及跨域问题

信息类别	详细信息
产品分类	uniapp/App
PC开发环境操作系统	Windows
PC开发环境操作系统版本号	win10
HBuilderX类型	正式
HBuilderX版本号	3.4.6
手机系统	iOS
手机系统版本号	iOS 15
手机厂商	模拟器
手机机型	iphone 12pro
页面类型	vue
vue版本	vue2
打包方式	云端
项目创建方式	HBuilderX

示例代码：

loader.add([
{
name: 'audio_on',
url: "static/img/button/audio_on.png",
crossOrigin: true  
},  
])

操作步骤：

使用pixijs的加载图片loader功能（其它游戏引擎也类似）

预期结果：

预期可以加载出来图片资源

实际结果：

加载不出

bug描述：

ios的wkwebview，本地的网页，加载本地的图片资源涉及跨域，加载不出图片。IOS的uiwebview正常

涉及的代码使用的是pixijs的loader.add，无效，设置crossOrigin参数为true也无效（IOS的uiwebview正常）

查了一下原因，原生的解决办法是要给webview添加允许跨域的属性设置以解决该问题：参考链接

所以请求给IOS的webview版加一个参数，允许跨域，谢谢！

nodeper 1楼•14 天前

感谢反馈，后续会提供 allowFileAccessFromFileURLs 的配置，可以自己开启，不过需要注意开启 allowFileAccessFromFileURLs 会存在安全漏洞，需要自己斟酌

zlyuanteng 2楼•14 天前

谢谢！！

songsunli 3楼•14 天前

请问现在这个配置加上了吗？

bupafengyu 4楼•14 天前

你好，现在allowFileAccessFromFileURLs加上了吗

ionicwang 5楼•14 天前

同问

wuwangju 6楼•14 天前作者

+1+1 顶一下

songsunli 7楼•14 天前

顶一下

yuanlaile 8楼•14 天前

日常询问

yibo5220 9楼•14 天前

希望官方能够给个解决方法吧

vueper 10楼•14 天前

参考一下《网赚游戏》中首页使用web-view的方式来解决跨域问题。 <web-view v-if="platform=='android'" :src="'/hybrid/html/plugins/h5/index.html'" class="webview" ref="iframe"></web-view>
<web-view v-if="platform=='ios'" :src="'http://localhost:13131/_www/hybrid/html/plugins/h5/index.html'" class="webview" ></web-view> iOS在manifest.json中开启miniserve “capabilities” : {
“plists” : {
“DCloudConfig” : {
“miniServer” : true
}
}
} 试试这种方式能否解决问题。打包后生效

ionicwang 11楼•14 天前

谢谢，但是这个是要开本地的localhost服务器吧

nodeper 12楼•14 天前

直接开就行了嘛

sinazl 13楼•14 天前

好的，我了解一下，谢谢！

sinazl 14楼•14 天前

回复灵就宫弟子: 使用上面的方案是否解决了问题？

phonegap100 15楼•14 天前

回复 DCloud_iOS_XHY:IOS云打包后 http://localhost:13131/_doc/uniapp_save/xxx 访问资源失效 hbx:3.4.15

zlyuanteng 16楼•14 天前

回复灵就宫弟子: 请问这个方式有用吗

zlyuanteng 17楼•14 天前

在 uni-app 中使用 WKWebView 加载本地图片时，可能会遇到跨域问题（CORS）。这是因为 WKWebView 默认启用了更严格的安全策略，限制了跨域资源的访问。

解决方案

使用 file:// 协议加载本地图片：如果你需要加载本地图片，可以使用 file:// 协议来访问本地文件。确保图片路径正确，并且文件存在于应用的沙盒目录中。
```
<img src="file:///path/to/your/image.png" />
```

配置 WKWebView 的跨域策略：你可以通过配置 WKWebView 的 WKPreferences 来允许跨域请求。在 uni-app 中，可以通过原生插件或自定义代码来实现。

WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init];
configuration.preferences = [[WKPreferences alloc] init];
configuration.preferences.javaScriptCanOpenWindowsAutomatically = YES;
configuration.preferences.javaScriptEnabled = YES;
configuration.preferences.setValue([@YES](/user/YES), forKey:@"allowFileAccessFromFileURLs");
configuration.setValue([@YES](/user/YES), forKey:@"allowUniversalAccessFromFileURLs");

WKWebView *webView = [[WKWebView alloc] initWithFrame:self.view.frame configuration:configuration];

使用 base64 编码图片：如果图片较小，可以将其转换为 base64 编码，然后直接在 HTML 中嵌入图片数据，避免跨域问题。
```
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA..." />
```

使用 uni-app 提供的 uni.getImageInfo API：你可以使用 uni.getImageInfo 获取图片信息，然后将图片路径转换为 base64 或直接使用本地路径。

uni.getImageInfo({
    src: 'path/to/your/image.png',
    success: function (res) {
        console.log(res.path); // 本地路径
        console.log(res.width); // 图片宽度
        console.log(res.height); // 图片高度
    }
});

使用 uni-app 的 uni.downloadFile API：如果图片来自网络，可以使用 uni.downloadFile 下载图片到本地，然后使用本地路径加载图片。

uni.downloadFile({
    url: 'https://example.com/image.png',
    success: function (res) {
        if (res.statusCode === 200) {
            console.log(res.tempFilePath); // 下载后的本地路径
        }
    }
});