Mobile app CORS trouble

sylvainbaron · February 21, 2023, 11:58am

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 · February 21, 2023, 1:38pm

This might help:

sylvainbaron · February 21, 2023, 2:45pm

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

jmartland22 · February 21, 2023, 4:01pm

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 · February 21, 2023, 9:02pm

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 · February 21, 2023, 9:21pm

@Adetoyinbo1

Adetoyinbo1 · February 22, 2023, 1:00am

@sylvainbaron

https://youtu.be/3YwGbN81Qws

I discuss these in that video. Hope it helps

sylvainbaron · February 22, 2023, 9:06am

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 · February 22, 2023, 10:15am

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 · February 22, 2023, 3:06pm

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 · February 22, 2023, 4:00pm

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 · February 22, 2023, 4:34pm

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 · February 22, 2023, 6:42pm

Here are few things i suggest you do

Remove the “/” at the end of your origins
check the credentials options for forms and serverconnect elements that needs cookies

Screenshot 2023-02-22 at 10.36.36 PM966×1184 42.9 KB
Debug your android via chrome. enter chrome://inspect/#devices in chrome and click inspect in the page

Hope that helps.

Cheese · February 22, 2023, 7:03pm

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';">

sylvainbaron · February 23, 2023, 11:32am

Thanks for the tips

sylvainbaron · February 24, 2023, 9:53am

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

I use Framework7 instead of Bootstrap, I imagine this do not change anything regarding CORS policy, do you confirm?
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 · February 24, 2023, 10:54am

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.