仅协议方案支持React Native WebView Cross起源请求：http，data，chrome，https

Question

We're trying to load SPA app with Angular JS and HTMl in Android React Native WebView . The solution is working fine with Dev server but when we tried to load it in debug and release build it throws following error. We have debugged it in chrome and found that all the resources are loading except the html files. Only Index.html file is getting loaded.

Error in console:

Failed to load file:///android_asset/template.html: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, https.

We are loading local html file in 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}
 /> 

We have tried to change the ReactWebViewManager.java under this path

MyReactProjectName\\node_modules\\react-native\\ReactAndroid\\src\\main\\java\\com\\facebook\\react\\views\\webview\\ReactWebViewManager.java we made following changes:

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);
}

Tried the solution as explained here , still not able to load the required HTML file.

Is there any way to change ReactWebViewManager.java for local file access as RN WebView is not able to locate the local HTML file and throwing CORS Error??

Environment

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

Answer 1

Closing the issue as suggested by Core Team Member. WebView has been moved to https://github.com/react-native-community/react-native-webview

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

Import the WebView component from react-native-webview and use it like so:

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 }}
      />
    );
  }
}

The above is working in Android without any issue.