Help me fix CORS error

[Priya_Sharma]

I'm new to wappler. I've gone through all the possible tutorials available online but could not find any solution for that. All tutorials are old and for previous versions of wappler.
I'm building an android application login form.

Environment I'm using.

Wappler 7.0.0 beta 14
Framework 7 8.3.3 with app connect
Capacitor 6.2.0

CORS ERROR

Access to XMLHttpRequest at 'https://my-site.com/dmxConnect/api/security/user-login.php' from origin 'http://localhost:49849' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

capacitor.config.json

{ "appId": "com.example.com", "appName": "Demo App", "webDir": "www", "bundledWebRuntime": true, "plugins": { "Http": { "enabled": true } } }

Config.php (API Server)

<?php $CONFIG_DEBUG = true; $CONFIG_SECRET_KEY = 'kjhghjggjhgjg'; $CONFIG_CORS_ORIGIN = 'capacitor://,capacitor://localhost,http://localhost,capacitor-electron://localhost'; $CONFIG_CORS_METHODS = 'GET,POST,OPTIONS,CONNECT,PUT'; $CONFIG_CORS_ALLOWED_HEADERS = 'accept,authorization,content-type,origin,referer';

[franse]

Hello! And welcome

@Priya_Sharma

Config.php (API Server)

<?php $CONFIG_DEBUG = true; $CONFIG_SECRET_KEY = 'kjhghjggjhgjg'; $CONFIG_CORS_ORIGIN = 'capacitor://,capacitor://localhost,http://localhost,capacitor-electron://localhost'; $CONFIG_CORS_METHODS = 'GET,POST,OPTIONS,CONNECT,PUT'; $CONFIG_CORS_ALLOWED_HEADERS = 'accept,authorization,content-type,origin,referer';

You need to add http://localhost:49849 (including port)

[Priya_Sharma]

I've added but there is no change. In wappler there is no CORS error. Login is successful, but in browser or in device it's getting errors.

[franse]

@Priya_Sharma

I've added but there is no change

And you're sure config.php is uploaded to the server?

Note there's a "problem" here:

When you change from one project to another one, mobile port changes.

If you're previewing your mobile project on port 49849 and switch to the backend one and add it to config.php, then once you go back to the mobile one, the port changed again...

[Priya_Sharma]

This is the uploaded file on server. I've opened two projects at once, so port doesn't change at all.

[franse]

One more try adding:
capacitor://localhost:49849 ?

[kfawcett]

@franse

capacitor://localhost:49849 ?

Just need to realize that everytime Wappler restarts the server for the mobile project (i.e by switching from one project to another or restarting Wappler) that the port will be different because Wappler assigns a random port to Mobile projects.

You can modify a file to set a static port and it will survive until you install a new version of Wappler.

Small Feature Request: the ability to specify a fixed port for preview per project or globally (HTML/Framework7)

As a workaround you can modify the first serverPort variable in server.js from 0 to another port number (e.g. 59540) located in <install directory>\Wappler\resources\app\Shared\DMXzone\dmxAppCreator\UI\server.js I’m not sure what issues this will cause if you’re working on multiple projects and switching between them, but it appears to work between one Server project and Capacitor mobile project.

[Priya_Sharma]

Cors error is fixed and I'm able to login to app. But even after successful login, there is no stored cookies showing. Kindly help

[franse]

Take a look here:

Tutorial: Storing cookies - Maintaining user login on Android/iOS

Hello everybody! Here Fran with another Mobile tutorial, in this case, I will show you how to store cookies on our device to keep the login even if we exit (completely) the app. Intro First of all, as I always say, please let me know of any error, suggestion, or misunderstanding due to my lack of English. We will be using Cookies and Http Capacitor plugins, so I recommend you first check this other tutorial. The requirements are having AndroidStudio/Xcode and a site that runs with https prot…