IOS report "Failed to resolve host network app id" error, Android is working properly

[mewebranding]

Bug Report

Problem

The Android platform app is working normally, and then we added the iOS platform. When running in the emulator, a white screen appears and the console reports "Failed to resolve host network app ID"

What is expected to happen?

IOS should work normally like Android

What does actually happen?

When running in the iOS emulator, a white screen is displayed and the console reports "Failed to resolve host network app id" (btw, Safari in the XCode emulator can access API hosts)

Information

Could it be due to compatibility between our XCode and Mac OS versions or some settings errors？

Command or Code

cordova platform add ios@7.1.0 && cordova build ios

Environment, Platform, Device

build on macOS Xcode simulator

Version information

Framework vue3.4.27

Cordova: Cordova CLI : 12.0.0 (cordova-lib@12.0.1) Cordova Platforms : ios 7.1.0 Cordova Plugins : None

System MacOS sonoma14.5 Xcode15.4 NodeJS : v21.7.1

Checklist

• [x] I searched for existing GitHub issues
• [x] I updated all Cordova tooling to most recent version
• [x] I included all the necessary information above

[breautek]

console reports "Failed to resolve host network app id" (btw, Safari in the XCode emulator can access API hosts)

This doesn't really sound like an error that cordova throws really. Is this error being shown in XCode console or the web console?

Also can you share your config.xml file?

[mewebranding]

this error is shown in XCode console.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.helloworld.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
    <name>HelloWorld</name>
    <description>Sample Apache Cordova App</description>
    <author email="dev@cordova.apache.org" href="https://cordova.apache.org">
        Apache Cordova Team
    </author>
    <content src="index.html" />
    <allow-intent href="http://*/*" />
    <allow-intent href="https://*/*" />
</widget>

[breautek]

I'm not really sure, but I definitely don't reproduce this though I don't use the VueJS framework as well. So I think this is more of a VueJS integration issue. It is possible that it assumes are more traditional web environment where you have a server, with a domain, etc... These things doesn't necessary exist in a webview environment.

Couple of things you can try:

Enabling url schemes

iOS webview has a concept of schemes, by default has this disabled. This means that you're web app is loaded over the file:// protocol, which the means the document has a null origin, and the webview considers the document insecure and will disable a lot of different features.

If you add a platform block in your config with the scheme and hostname preferences, it will enable the url scheme, which means you're document will be proxied through something that looks like a server and the document will have a proper origin and will be considered secure, for the purposes of enabling features locked normally locked behind https.

<?xml version='1.0' encoding='utf-8'?>
<widget id="com.helloworld.app" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>HelloWorld</name>
  <description>Sample Apache Cordova App</description>
  <author email="dev@cordova.apache.org" href="https://cordova.apache.org"> Apache Cordova Team </author>
  <content src="index.html" />
  <allow-intent href="http://*/*" />
  <allow-intent href="https://*/*" />
  <platform name="ios">
    <preference name="scheme" value="app" />
    <preference name="hostname" value="localhost" />
  </platform>
</widget>

Couple of things to note:

1. We use the platform block because android also accept these preferences for their equivalent system, but iOS and android has different requirements where Android only accepts http or https as the scheme and iOS requires you to use a non-reserved scheme where http and https are reserved. This is why we choose something more custom, like app for our ios scheme.

2. Android defaults to https://localhost as the scheme instead of the file:// protocol strategy, which may explain why VueJS works under the android webview out of the box.

Possibility of finding more insights

If the above fails... then we probably need to get more insights. I think on iOS, xcode will still log JS console messages, but if it is a message from JS, the web inspector may have more insightful information.

If you don't know how to use the Safari remote inspector, I have a blog post that describes how, just scroll down to the iOS section.

The key thing though is safari web inspector doesn't capture events that occurred before the inspector was attached, so in order to see log messages, network errors, or any debug information that occurred on launch, you'll need to refresh the webview with the inspector attached. This can be done by pressing cmd + r on the inspector window.

[mewebranding]

<preference name="scheme" value="app" />

added this, it works very well!! thank you very much for your help :)

[jonyking]

The roblem is still existing. Is there a fix for this? The solution from @mewebranding is not working for me. Also not to add the cordova plugin-file

[natmet]

Same here, not working for capacitor.

[mewebranding]

Try this

2024年9月9日 03:54，jonyking @.***> 写道：

The roblem is still existing. Is there a fix for this? The solution from @mewebranding https://github.com/mewebranding is not working for me. Also not to add the cordova plugin-file

— Reply to this email directly, view it on GitHub https://github.com/apache/cordova-ios/issues/1440#issuecomment-2336804734, or unsubscribe https://github.com/notifications/unsubscribe-auth/AEVIHDH5GJWBOGGZZYZSO3DZVSTQTAVCNFSM6AAAAABJFMCV2GVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMZWHAYDINZTGQ. You are receiving this because you were mentioned.