Mobile app CORS trouble

[sylvainbaron]

Hi everybody,
I’ve read every posts of this forum and every external doc before asking for your help…
I can’t achieve getting data from my Web_Project.

Web:

• Node.js / Bootstrap / Postgresql / Docker / Linodes
• and works perfectly

Mobile App:

• F7 + Capacitor
• iOS and Android versions

My login page works and log user ID and returns infos

My Log-in ServerAction sets cookies as expected (IdUser…) / or show Alert if access isn’t authorized.

Then, on success the login server connect should load different SC based on COOKIES values.

I tried different settings for CORS (domain, localhost, *) and none of them worked.
I tried “playing” with secure, caching, .
I tried with the different “tips” for no results…

Got 200 response so I imagine this is really a litle setting to modify.

I tried calling localhost and hosted SC and get the same result.

One more thing - The cookies seems not setted on emulator for both iOS and Android- while they are setted and displayed in the browser.

Can’t go futher on my project without unlocking this.
Many thanks for your help.

Sylvain

[bpj]

This might help:

API Project CORS - for Mobile App - help!

Here’s what works for me on iOS and Android. Yes, use credentials on all server connects. In config.xml under the platform android section add the following ( I’m pretty sure this defaults to false and thus could be removed entirely, but I know having it works. ): <preference name="AndroidInsecureFileModeEnabled" value="false" /> For both ios and android sections, include a hostname preference: <preference name="hostname" value="domain.com" /> For ios only add scheme: <pr…

[sylvainbaron]

Thanks @bpj for your help!
I re-tried this without success. Worst I can’t load my login SC anymore.

[jmartland22]

I had similar problems. Were my login action works but nothing else. My fix was…

On the CORS option I don’t think the * works. I would just try and get it to work on Android first. To do this change the CORS to http://localhost . Then deploy your app.

Capacitor needs the following:-

On the mobile app make sure you have ‘credentials’ ticked. Then run the android emulator and see if this works.

I think the problem is the on the web version of the Capacitor app you also need to put the port on. Problem is the port changes each time the server restarts.

This video goes over it all https://www.youtube.com/watch?v=3YwGbN81Qws&t=2450s around the 19 minute mark.

[kfawcett]

Yes, the port is required for web and it cannot have a trailing slash.

@sylvainbaron what do you have in the Origin field on the Cors tab? Could you provide a screenshot?

Also, do you have the “Credentials” checkbox checked on all Server Connects on the web/mobile project?

[scalaris]

@Adetoyinbo1

[Adetoyinbo1]

@sylvainbaron

https://youtu.be/3YwGbN81Qws

I discuss these in that video. Hope it helps

[sylvainbaron]

Thanks, I’m watching the video and test just after

I pasted this setup in the hidden Wappler config File since I use Docker.

Also, do you have the “Credentials” checkbox checked on all Server Connects on the web/mobile project?

My WebApp include many SC, 90% are not called by the Mobile App, do I need to had credential too ?

[sylvainbaron]

Thanks for video, lot of interesting things (browser / flow test, progress bar, etc.)
I can’t get my Mobile App working. The more I try the lesss I can load SC…

[kfawcett]

@sylvainbaron

My WebApp include many SC, 90% are not called by the Mobile App, do I need to had credential too ?

You must add the credentials to all Server Connects and Server Connect forms in the mobile app. I’m not sure about the web app since that is the same host.

Also you may be putting the wrong URLs in your CORS Origin field. When you say mobile app, what do you mean? Are you emulating Android, iOS, or just launching the app to local browser while building?

If I’m going by your screenshots above, then you’re launching the app to your local browser. In the first screenshot, you can see your URL is localhost:58552, so that is what you would need in CORS Origin field. The port will most likely change every time you restart the project, so you’ll need to check for the new port and add it to the CORS origin each time.

[sylvainbaron]

You must add the credentials to all Server Connects and Server Connect forms in the mobile app. I’m not sure about the web app since that is the same host.

ok, I understand.

When you say mobile app, what do you mean? Are you emulating Android, iOS

I would like to test all my App in the braowser then in the Android and iOs emulators, but I’m to listen the better option

[kfawcett]

Browser is the easiest to start with, so just ensure you have the correct localhost+port in origin field. Android and iOS both have extra requirements that I’ve found hard to get correct with CORS, so gettting everything working via browser may be easier in the beginning.

[Adetoyinbo1]

Here are few things i suggest you do

1. Remove the “/” at the end of your origins
   

2. check the credentials options for forms and serverconnect elements that needs cookies
   

   

3. Debug your android via chrome. enter chrome://inspect/#devices in chrome and click inspect in the page

Hope that helps.

[Cheese]

Try including the below meta within your pages (adapt as necesery):

<meta http-equiv="X-Content-Security-Policy"
		content="img-src 'self' data:; default-src 'self' 'unsafe-inline'; https://domain1.com/*/ https://domain2.com/*/ https://*/ https://domain3.com/*/ script-src 'self' 'unsafe-eval'; object-src 'self';">

Content-Security-Policy - HTTP | MDN

[sylvainbaron]

Thanks for the tips

[sylvainbaron]

Thanks @Adetoyinbo1 for your answer
I watched your video yesterday, and the day before.

1. I use Framework7 instead of Bootstrap, I imagine this do not change anything regarding CORS policy, do you confirm?

2. You set routing conditions and pages based on login flow: Do I need to set the exact same “flow” since Frameworks7 provides a Login Screen?

Thanks for your help
I’m deeply stuck with this…

[Adetoyinbo1]

Cors have the same setup for framework7 and bootstrap. Its not framework dependent.

You can use same flow for framework7 and bootstrap, just bear in mind that their routing is different.