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

[FutureArchitect-takeda1874]

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
• [x] 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

[elvisgraho]

Related - #https://github.com/ionic-team/cordova-plugin-ionic-webview/issues/587

[elvisgraho]

Will this fix the issue?

[m8xp0w3r]

I am facing the same issue. Capacitor doesn't have a config.xml like cordova so I don't think your hint can solve this @elvisgraho But I have to say that I am not really a capacitor genius. 😂

Installed ionic version: 6.13.1

💊   Capacitor Doctor  💊 

Latest Dependencies:

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

Installed Dependencies:

  @capacitor/cli 2.4.6
  @capacitor/ios 2.4.7
  @capacitor/android 2.4.6
  @capacitor/core 2.4.6
  @capacitor/electron not installed

[success] Android looking great! 👌
  Found 6 Capacitor plugins for ios:
    cordova-plugin-advanced-http (3.1.0)
    cordova-plugin-device (2.0.3)
    cordova-plugin-file (6.0.2)
    cordova-plugin-file-transfer (1.7.1)
    cordova-plugin-nativestorage (2.3.2)
    cordova-sqlite-storage (5.1.0)
[success] iOS looking great! 👌

[m8xp0w3r]

@FutureArchitect-takeda1874 could you solve this issue?

[elvisgraho]

Would be cool to find a fix for this issue, because it prevents errors while developing in live reload. Some components/libraries do not expose CORS errors at all.

[m8xp0w3r]

Are there any updates regarding this problem?

[brospars]

As a workaround I use the Filesystem API when the http request fails :

this.http.get(webURI).subscribe((data) => {
  this.data = data;
}, (error) => {
  // Backup support for iOS livereload (dev environment)
  Filesystem.readFile({
    path: path,
    directory: directory
  }).then((file) => {
    this.data = file.data;
  });
})

[realityfilter]

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

[m8xp0w3r]

My workaround is to use files from the assets when I am in livereload szenario. This is not that cool but right now it fits my needs.

[realityfilter]

@m8xp0w3r Thanks. As a workaround I set additional headers in WebViewAssetHandler.

[Newbie012]

@realityfilter thanks for sharing your workaround 🙂 could you please elaborate? we're experiencing this issue as well.

[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.

[Newbie012]

I'm using pnpm, so it's built-in using pnpm patch @capacitor/ios

[aahlrichs5]

@jcesarmobile I was able to temporarily fix this issue by using the suggested

"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Methods": "GET, OPTIONS"

lines and patch-package that was mentioned by user realityfilter. This bug seems to be fairly low priority as it has been around for quite a while and it appears that a fix may not immediately come. With this being said I have a few questions regarding adding these lines to WebViewAssetHandler.swift

Do you have any insight as to how this may effect production code? If this opens up a potential security vulnerability I would not want to ship this patch-package code out to a production environment. If this is the case, I was also curious if there was a way to only apply this to the live-reload environment rather than all iOS builds.

[jcesarmobile]

fixed in https://github.com/ionic-team/capacitor/pull/6539

[AdlerJS]

I've upgraded my capacitor version and can confirm this works for images, however, video files are still seeing the same error:

[jcesarmobile]

Can you please create a new issue and provide a sample app tha reproduces the problem?