capacitor: 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
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 9
- Comments: 17 (2 by maintainers)
We just modified WebViewAssetHandler.swift (under Development Pods/Cordova).
I think the npm package
patch-package
could be used to change this file undernode_modules/@capacitor/ios/Capacitor/Capacitor
and patch it automatically afternpm install
.This is still a problem with capacitor 3. Any workarounds, configuration possibilities?
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.