使用带有 http://localhost:3456/fileName/ 的 epubjs 时，本机 android 应用程序中出现空响应错误

Question

I'm currently working on react-native project and building simple app for reading books. and i'm using "epubjs" and "react-native-static-server" for local file accessing.

everything works fine in android os version below 8.0 devices but not in 9/10 (in ios everything works )

and the frustrating thing is that in develop/debug build (assembleDebug) it's working in android 9/10 but after installing release build (assembleRelease) it gives me empty response error.

this is my code

streamer component:

import StaticServer from 'react-native-static-server';
import { MainBundlePath, DocumentDirectoryPath, readDir, readFile, stat, mkdir, exists } from 'react-native-fs';
import RNFetchBlob from "rn-fetch-blob";
import { zip, unzip, unzipAssets, subscribe } from 'react-native-zip-archive';
import { join } from "path";
const Uri = require("epubjs/lib/utils/url");


export class Streamer {
  constructor(opts) {
    opts = opts || {};
    this.port = opts.port || "3" + Math.round(Math.random() * 1000);
    this.root = opts.root || "www";

    this.serverOrigin = 'file://';

    this.urls = [];
    this.locals = [];
    this.paths = [];

    this.started = false;
    this.server = undefined;
  }

  setup() {
    // Add the directory
    const dirPath = join(DocumentDirectoryPath,this.root);
    return exists(dirPath)
      .then((exists) => {
        if (!exists) {
          return mkdir(dirPath);
        }
      })
      .then(() => {
        return new StaticServer(this.port, this.root, { localOnly: true });
      })
      .catch((e) => { console.error(e) });
  }

  start() {
    this.started = true;
    return this.setup()
      .then((server) => {
        this.server = server;
        return this.server.start();
      })
      .then((url) => {

        this.serverOrigin = url;
        console.log(url, this.urls, this.paths);
        return url;
      });
  }

  stop() {
    this.started = false;
    if (this.server) {
      this.server.stop();
    }
  }

  kill() {
    this.started = false;
    if (this.server) {
      this.server.kill();
    }
  }


  check(bookUrl) {
    const filename = this.filename(bookUrl);
    const targetPath = join(DocumentDirectoryPath,this.root,filename);

    return RNFetchBlob.fs.exists(targetPath);
  }

  get(bookUrl) {
    return this.check(bookUrl)
      .then((exists) => {
        if (exists) {
          const filename = this.filename(bookUrl);
          const url = `${this.serverOrigin}/${filename}/`
          console.log(url, this.urls, this.paths);
          return url;
        }

        return this.add(bookUrl);
      })
  }


  add(bookUrl) {

    const filename = this.filename(bookUrl);

    return RNFetchBlob
      .config({
        fileCache: true,
        path: join(DocumentDirectoryPath,filename)
      })
      .fetch("GET", bookUrl)
      .then((res) => {
        const sourcePath = res.path();
        const targetPath = join(DocumentDirectoryPath,this.root,filename);
        const url = `${this.serverOrigin}/${filename}/`
        return unzip(sourcePath, targetPath)
          .then((path) => {

            this.urls.push(bookUrl);
            this.locals.push(url);
            this.paths.push(path);

            // res.flush();

            return url;
          })
      });
  }

  filename(bookUrl) {
    var uri = new Uri(bookUrl); 
    if(uri.filename && (uri.filename.indexOf("?") > -1)) { 
      return uri.filename.split("?")[0].split("%")[0].replace(".epub", ""); 
    } else { 
      return uri.filename.replace(".epub", ""); 
    }
   }

}

and here is the method:

import { Streamer } from './streamer';
import ePub, { Layout, EpubCFI, } from "epubjs";


_startStreamer =  (bookUrl) => {
        if (this.book) {
            this.book.destroy();
        }

        this.book = ePub();
        this.streamer = new Streamer();
        return streamer.start()
        .then(origin=>{

            return streamer.get(bookUrl);
        })
        .then(src=>{
            return this.book.open(src);
        })
        .then(()=>this.book.ready)
        .then(()=>{
            this.setState({toc:this.book.navigation.toc})
            return this.book.navigation.toc;
        })

    }

Answer 1

After hours of google search i finally found solution for this error. it's because of

Starting with Android 9 (API level 28), cleartext support is disabled by default.

to make it work on android os 9/10 you need to add this to the

AndroidManifest.xml -->

<application  
  ///others
  android:usesCleartextTraffic="true"
>
<application />

for more info check this answer https://stackoverflow.com/a/50834600/9702470