使用帶有 http://localhost:3456/fileName/ 的 epubjs 時，本機 android 應用程序中出現空響應錯誤

Question

我目前正在研究本機項目並構建用於閱讀書籍的簡單應用程序。 我正在使用“epubjs”和“react-native-static-server”進行本地文件訪問。

在 8.0 設備以下的 android os 版本中一切正常，但在 9/10 中則不然（在 ios 中一切正常）

令人沮喪的是，在開發/調試版本 (assembleDebug) 中，它在 android 9/10 中運行，但在安裝發布版本 (assembleRelease) 后，它給了我空響應錯誤。

這是我的代碼

流光組件：

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

}

這是方法：

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

經過數小時的谷歌搜索，我終於找到了解決此錯誤的方法。 這是因為

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

要使其在 android os 9/10 上運行，您需要將其添加到

AndroidManifest.xml -->

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

有關更多信息，請查看此答案https://stackoverflow.com/a/50834600/9702470