Запросы React Native WebView Cross origin поддерживаются только для схем протоколов: http, data, chrome, https
Мы пытаемся загрузить приложение SPA с Angular JS и HTMl в Android React Native WebView. Решение отлично работает с сервером Dev, но когда мы пытались загрузить его в сборку отладки и выпуска, он выдает следующую ошибку. Мы отладили его в chrome и обнаружили, что загружаются все ресурсы, кроме файлов html. Загружается только файл Index.html.
Ошибка в консоли:
Failed to load file:///android_asset/template.html:
Cross origin requests are only supported for protocol schemes: http, data, chrome, https.
Мы загружаем локальный html-файл в RN WebView:
<WebView
ref = "webview"
scalesPageToFit = {true}
source = {{uri: 'file:///android_asset/www/index.html'}}
javaScriptEnabled = {true}
domStorageEnabled = {true}
nativeConfig = {{props: {webContentsDebuggingEnabled: true}}}
setAllowFileAccessFromFileURLs = {true}
setAllowUniversalAccessFromFileURLs = {true}
/>
Мы попытались изменить ReactWebViewManager.java по этому пути
MyReactProjectName \ node_modules \ react-native \ ReactAndroid \ src \ main \ java \ com \ facebook \ react \ views \ webview \ ReactWebViewManager.java мы внесли следующие изменения:
settings.setDomStorageEnabled(true);
settings.setAllowFileAccess(true);
settings.setAllowContentAccess(true);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
settings.setAllowFileAccessFromFileURLs(true);
setAllowUniversalAccessFromFileURLs(webView, true);
}
Пробовал решение, как описано здесь, но все еще не смог загрузить требуемый файл HTML.
Есть ли способ изменить ReactWebViewManager.java для доступа к локальному файлу, поскольку RN WebView не может найти локальный файл HTML и выдает ошибку CORS ??
Среда
React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i3 CPU 540 @ 3.07GHz
Memory: 125.40 MB / 12.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.5.0 - /usr/local/bin/node
Yarn: 1.10.1 - ~/.yarn/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Watchman: 4.9.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 12.0, macOS 10.14, tvOS 12.0, watchOS 5.0
IDEs:
Android Studio: 3.0 AI-171.4443003
Xcode: 10.0/10A255 - /usr/bin/xcodebuild
npmPackages:
react: 16.5.0 => 16.5.0
react-native: 0.57.1 => 0.57.1
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Закрытие вопроса по предложению члена основной группы. WebView перемещен в https://github.com/react-native-community/react-native-webview
$ yarn add react-native-webview
$ react-native link react-native-webview
Импортируйте компонент WebView из реагировать-native-webview и используйте его так:
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { WebView } from 'react-native-webview';
// ...
class MyWebComponent extends Component {
render() {
return (
<WebView
source = {{ uri: 'https://infinite.red/react-native' }}
style = {{ marginTop: 20 }}
/>
);
}
}
Вышеупомянутое работает в Android без каких-либо проблем.
Я пробовал это, и он работает на Android. Как насчет IOS? У вас есть какое-нибудь решение для этого? Спасибо
то же самое здесь, в Android работает нормально, но не в iOS, stackoverflow.com/questions/61523598/…
если кто-нибудь придет сюда, вот код, который у меня сработал allowUniversalAccessFromFileURLs = {true} для IOS в последней версии