在我的Cordova + React应用程序中,我使用SVG图标,所以当我渲染一个Icon时,我渲染了React组件
<svg className="icon">
<use xlinkHref="assets/icons.svg#icon-plus-circle"></use>
</svg>
这曾经工作正常,但在安装了cordova-plugin-wkwebview-engine后,导致应用程序使用WKWebView而不是UIWebView,图标不再可见。
在控制台中我收到此错误(已格式化)
file:///var/mobile/Containers/Data/Application/34505CDC-DA39-4A04-8A61-1D99969F311B/Library/Application%20Support/com.mycompany.myapp/cordova-hot-code-push-plugin/2017.03.02-19.54.54/www//assets/icons.svg#icon-plus-circle
from frame with URL
file:///var/mobile/Containers/Data/Application/34505CDC-DA39-4A04-8A61-1D99969F311B/Library/Application%20Support/com.mycompany.myapp/cordova-hot-code-push-plugin/2017.03.02-19.54.54/www//index.html.
Domains, protocols and ports must match.
为什么会出现此错误?据我所知,域名,协议和端口确实匹配,所以我不明白它为什么抱怨。
这是我的config.xml:
<?xml version='1.0' encoding='utf-8'?>
<widget id="com.menigo.menigoapp" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
<name>App</name>
<description>
App
</description>
<author email="test@example.com" href="http://www.example.com">
Company
</author>
<content src="index.html" />
<plugin name="cordova-plugin-whitelist" spec="1" />
<access origin="*" />
<allow-intent href="http://*/*" />
<allow-intent href="https://*/*" />
<allow-intent href="tel:*" />
<allow-intent href="sms:*" />
<allow-intent href="mailto:*" />
<allow-intent href="geo:*" />
<allow-navigation href="*" />
<platform name="android">
<allow-intent href="market:*" />
<!--
ldpi : 36x36 px
mdpi : 48x48 px
hdpi : 72x72 px
xhdpi : 96x96 px
xxhdpi : 144x144 px
xxxhdpi : 192x192 px
-->
<icon src="res/icon.png" density="ldpi" />
<icon src="res/icon.png" density="mdpi" />
<icon src="res/icon.png" density="hdpi" />
<icon src="res/icon.png" density="xhdpi" />
</platform>
<platform name="ios">
<allow-intent href="itms:*" />
<allow-intent href="itms-apps:*" />
<!-- iOS 8.0+ -->
<!-- iPhone 6 Plus -->
<icon src="res/icon.png" width="180" height="180" />
<!-- iOS 7.0+ -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon.png" width="60" height="60" />
<icon src="res/icon.png" width="120" height="120" />
<!-- iPad -->
<icon src="res/icon.png" width="76" height="76" />
<icon src="res/icon.png" width="152" height="152" />
<!-- Spotlight Icon -->
<icon src="res/icon.png" width="40" height="40" />
<icon src="res/icon.png" width="80" height="80" />
<!-- iOS 6.1 -->
<!-- iPhone / iPod Touch -->
<icon src="res/icon.png" width="57" height="57" />
<icon src="res/icon.png" width="114" height="114" />
<!-- iPad -->
<icon src="res/icon.png" width="72" height="72" />
<icon src="res/icon.png" width="144" height="144" />
<!-- iPhone Spotlight and Settings Icon -->
<icon src="res/icon.png" width="29" height="29" />
<icon src="res/icon.png" width="58" height="58" />
<!-- iPad Spotlight and Settings Icon -->
<icon src="res/icon.png" width="50" height="50" />
<icon src="res/icon.png" width="100" height="100" />
<!-- iPad Pro -->
<icon src="res/icon.png" width="167" height="167" />
</platform>
<engine name="ios" spec="~4.3.1" />
<engine name="android" spec="~6.0.0" />
<plugin name="cordova-sqlite-storage" spec="~2.0.0" />
<chcp>
<auto-download enabled="false" />
<native-interface version="5" />
</chcp>
<preference name="Orientation" value="portrait" />
<preference name="DisallowOverscroll" value="true" />
<preference name="BackupWebStorage" value="none" />
</widget>
这是我的内容安全政策:
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: blob: gap: * 'unsafe-eval' 'unsafe-inline'; style-src 'self' fonts.googleapis.com 'unsafe-inline'; media-src *; img-src 'self' data: content: blob:;">