Mobile app CORS trouble

Mobile Apps
1

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

Capture d’écran 2023-02-21 à 12.40.42
Capture d’écran 2023-02-21 à 12.40.422438×2166 390 KB

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.

Capture d’écran 2023-02-21 à 12.40.59
Capture d’écran 2023-02-21 à 12.40.593338×2142 611 KB

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

Capture d’écran 2023-02-21 à 12.50.11
Capture d’écran 2023-02-21 à 12.50.112128×1812 529 KB

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

2

This might help:

1 Like
3

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

4

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:-
image

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.

1 Like
5

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?
image

1 Like
6

@Adetoyinbo1

2 Likes
7

@sylvainbaron

https://youtu.be/3YwGbN81Qws

I discuss these in that video. Hope it helps

2 Likes
8

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

Capture d’écran 2023-02-22 à 10.06.41
Capture d’écran 2023-02-22 à 10.06.411294×1228 80.4 KB

Capture d’écran 2023-02-22 à 10.08.07
Capture d’écran 2023-02-22 à 10.08.071618×1134 71.5 KB

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 ?

9

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…

10

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

1 Like
11

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

12

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.

1 Like
13

Here are few things i suggest you do

  1. Remove the “/” at the end of your origins
    Screenshot 2023-02-22 at 10.30.17 PM

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

    Screenshot 2023-02-22 at 10.36.36 PM
    Screenshot 2023-02-22 at 10.36.36 PM966×1184 42.9 KB

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

Hope that helps.

1 Like
14

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';">
1 Like
15

Thanks for the tips

16

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…

17

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.

1 Like
18

Please check: