Cross-Origin Resource Sharing (CORS) issue

[mohamedmek]

I'm experiencing a Cross-Origin Resource Sharing (CORS) issue on my server. Despite implementing various solutions, the problem persists.

Issue Summary:
I'm trying to make API requests from my frontend application (https://my-frontend-app.example.com) to my backend API (https://my-backend-api.example.com/api/service). However, I'm encountering CORS errors that prevent successful communication. Specifically, I receive the following error message:

CORS Policy Error: Access to fetch at 'https://my-backend-api.example.com/api/service' from origin 'https://my-frontend-app.example.com' has been blocked by CORS policy.

Steps Taken:
To resolve this issue, I have:

1. Verified and configured the CORS settings in the Laravel application, including the cors.php configuration file.
2. Ensured that the appropriate middleware is registered in app/Http/Kernel.php.
3. Tested requests through Postman, which worked without issue.
4. Tried adding the mode: 'no-cors' in my fetch requests as a workaround, but that did not resolve the CORS issue.

Request:
As a potential solution, I'd like to know if it's possible to add the Access-Control-Allow-Origin header to the .htaccess file on the server to allow requests from my frontend domain.

Here's the line I'd like to add:

Header set Access-Control-Allow-Origin "https://my-frontend-app.example.com"

[nebulon]

Hi, is this related to Cloudron in any way or a generic question around how to get CORS working with Laravel apps?

[mohamedmek]

Thank you for your response. I apologize for not being clear about how this relates to Cloudron. Let me clarify my setup and the steps I've taken:

1. Backend: I'm running a Laravel application on a LAMP Cloudron app.

2. Frontend: My frontend application is hosted on Cloudflare Pages.

The CORS issue occurs when my frontend (on Cloudflare Pages) tries to make API requests to my backend (on the Cloudron LAMP app).

I've tried several approaches to resolve this:

1. Configuring CORS settings in Laravel (cors.php and middleware)
2. Attempting to add CORS headers in Apache's .htaccess file
3. Trying to add CORS headers in the Nginx configuration
4. Attempting to modify the Apache configuration file at /etc/apache2/sites-enabled/app.conf

However, I'm facing difficulties:

• The Laravel configuration doesn't seem to be effective
• I'm unsure how to properly configure Apache within the Cloudron LAMP app
• I don't have write access to the Nginx configuration files
• I don't have write access to the Apache configuration file (/etc/apache2/sites-enabled/app.conf)

My questions are:

1. What's the recommended way to handle CORS in a Cloudron LAMP app when the frontend is hosted elsewhere?
2. Can you provide guidance on how to properly configure CORS headers in this setup, given that I don't have direct access to modify Apache or Nginx configurations?
3. Are there any Cloudron-specific settings or tools I should be using to manage this?
4. Is there a way to add custom Apache or Nginx configurations in a Cloudron LAMP app without directly editing the system files?

I appreciate any help or direction you can provide. Thank you!

[nebulon]

Since the domain of the frontend and the backend differ, the browser will send a preflight check request to the backend for the REST calls, so this means the backend has to respond properly via CORS. In your case do not touch the apache nor nginx configs (anyways nginx is the reverse proxy on Cludron and changes won't persist).

The Laravel app then should respond with the correct CORS messages, however I am no Laravel expert so I don't know how this works with that framework.

Edit: if Laravel needs apache settings, follow the docs at https://docs.cloudron.io/apps/lamp/#apache-settings