Question

我在应用程序中使用ionic3。我第一次安装时遇到Android应用程序的错误。然后重新启动应用程序即可正常工作。

从来源“ file：//”访问“”处的XMLHttpRequest具有已被CORS政策屏蔽：未响应预检请求通过访问控制检查：没有“ Access-Control-Allow-Origin”标头出现在请求的资源上。

软件规格为：

cordova 9.0.0
ionic 3
Android platform 8.0.0
Node 10.15.3
Angular 4

插件列表：

cordova-plugin-camera 4.0.3 "Camera"
cordova-plugin-compat 1.2.0 "Compat"
cordova-plugin-device 2.0.2 "Device"
cordova-plugin-firebase-lib 3.3.0 "Google Firebase Plugin"
cordova-plugin-geolocation 2.4.3 "Geolocation"
cordova-plugin-inappbrowser 3.0.0 "InAppBrowser"
cordova-plugin-insomnia 4.3.0 "Insomnia (prevent screen sleep)"
cordova-plugin-ionic-keyboard 2.1.2 "cordova-plugin-ionic-keyboard"
cordova-plugin-ionic-webview 1.1.19 "cordova-plugin-ionic-webview"
cordova-plugin-market 1.2.0 "Market"
cordova-plugin-network-information 2.0.1 "Network Information"
cordova-plugin-screen-orientation 3.0.1 "Screen Orientation"
cordova-plugin-splashscreen 5.0.2 "Splashscreen"
cordova-plugin-statusbar 2.4.2 "StatusBar"
cordova-plugin-whitelist 1.3.3 "Whitelist"
cordova.plugins.diagnostic 4.0.8 "Diagnostic"
es6-promise-plugin 4.2.2 "Promise"
info.protonet.imageresizer 0.1.1 "Image Resizer"

尝试过的解决方案：

白名单插件仅限于1.3.3

在行下方添加

<allow-intent href="file://*" />
<allow-intent href="file://" />
<allow-navigation href="file://" />
<allow-navigation href="file://*" />
<allow-navigation href="*" />

还检查了是否升级了Webview和白名单插件。什么都没用。

请根据需要提出更改建议。即使在生产版本中，我们也没有发布新版本。旧的bbuild遇到了这个问题

Answer 1

我找到了答案。对于新更新的chrome版来说，此问题已经到来，对于移动设备中的旧版chrome，它也能正常工作。

Answer 2

我遇到了同样的问题，我正在从Android 9上的cordova 6.5.0应用程序调用后端API。

在从Play商店安装Chrome更新（v76.0.3809.89-7月30日）之前，一切正常。现在，当我第一次安装应用程序或清除应用程序数据时，始终不会出现CORS问题。

如果我启动该应用程序然后将其终止，则在重新启动后，它们将再次恢复正常。我认为这有点奇怪。

Answer 3

猜测它必须与chrome更新有关，以及从Android v7开始，android如何通过chrome APK使用webview而不是系统webview。

所以...更新到最新版本的chrome会影响webview，因此您的离子应用（使用webview进行渲染）会崩溃。

发现此链接有用 https://www.androidpolice.com/2016/07/20/google-explains-chrome-will-become-webview-android-7-0/

Answer 4

您可以通过以下插件将角度HTTP请求代理到本机HTTP（cordova HTTP）来解决此问题。通过使用本机HTTP，您将摆脱CORS问题。

https://github.com/sneas/ionic-native-http-connection-backend

基本上，您将用相同的本机实现替换有角的HttpBackEnd接口。（AppModule中的提供程序）

providers: [
        {provide: HttpBackend, useClass: NativeHttpFallback, deps: [Platform, NativeHttpBackend, HttpXhrBackend]},
]

Answer 5

如果您要访问移动存储文件，则应使用httpd插件创建本地服务器。

https://stackoverflow.com/a/57494421/7456041

“ file：//”已被CORS政策阻止

5 个答案: