React Native WebView. Запросы перекрестного происхождения поддерживаются только для схем протоколов: http, data, chrome, https. - PullRequest
Новая
       22

React Native WebView. Запросы перекрестного происхождения поддерживаются только для схем протоколов: http, data, chrome, https.

0 голосов
/ 10 октября 2018

Мы пытаемся загрузить приложение 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 \ реагировать-родной \ 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-файл.

Isесть ли способ изменить 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

1 Ответ

0 голосов
/ 17 октября 2018

Закрытие вопроса в соответствии с предложением основного члена команды. WebView был перемещен в https://github.com/react-native-community/react-native-webview

$ yarn add react-native-webview
$ react-native link react-native-webview

Импортировать компонент WebView из act-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 без каких-либо проблем.

...