bug: CORS error when loading local files in iOS with live reload

Bug Report

Capacitor Version

💊   Capacitor Doctor  💊 

Latest Dependencies:

  @capacitor/cli: 2.4.6
  @capacitor/core: 2.4.6
  @capacitor/android: 2.4.6
  @capacitor/electron: 2.4.6
  @capacitor/ios: 2.4.6

Installed Dependencies:

  @capacitor/cli 2.4.4
  @capacitor/android 2.4.4
  @capacitor/ios 2.4.4
  @capacitor/core 2.4.4
  @capacitor/electron not installed

[success] Android looking great! 👌
  Found 1 Capacitor plugin for ios:
    cordova-plugin-file (6.0.2)
[success] iOS looking great! 👌

Platform(s)

• Android
• iOS
• Electron
• Web

Current Behavior

The local file converted to Web View-friendly path (like capacitor://localhost/capacitor_file/…) cannot be fetched because of CORS error when running app in iOS with live reload. It seems that CORS error is occurred because the source origin is http://xxx.xxx.xx.xx:8100 in default with live reload.

Expected Behavior

I can fetch my local file in OS with live reload.

Code Reproduction

// capacitor.config.json
{
  "server": {
    "url": "http://192.168.11.21:8100",
    "cleartext": true
  }
}

const path = "captured-photos/66026da3-5098-478a-9794-be8926df96e5"
const { uri } = await Filesystem.stat({ directory, path })
const webURI = window.Ionic.WebView.convertFileSrc(uri)

// throws CORS error!
const response = await fetch(webURI)

Other Technical Details

npm --version output: 6.14.10

node --version output: v14.15.1

pod --version output (iOS issues only): 1.10.0

Additional Context

Related issues

• https://github.com/ionic-team/capacitor/issues/2042
• https://github.com/ionic-team/capacitor/issues/2439

[realityfilter]

We just modified WebViewAssetHandler.swift (under Development Pods/Cordova).

var headers =  [
  "Content-Type": mimeType,
  "Cache-Control": "no-cache",
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, OPTIONS"
]

I think the npm package patch-package could be used to change this file under node_modules/@capacitor/ios/Capacitor/Capacitor and patch it automatically after npm install.

[realityfilter]

This is still a problem with capacitor 3. Any workarounds, configuration possibilities?