Question 285681 in Plesk Question posted in
The official documentation for Plesk Obsidian can be found here.

It is giving CORS error in server when deployed with Plesk for React JS and PHP Laravel

I am an app whose frontend is in React JS and backend is in Laravel. Both of them are deployed using Plesk. I have setup all necessary configurations in Laravel backend to handle CORS issues. But it is still giving CORS error.

Here is the content of the cors.php file in config folder in laravel backend.


return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['*'],
    'allowed_methods' => ['*'],

    'allowed_origins' => ['url_of_react_app'],

    'allowed_origins_patterns' => ['*'],

    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,

];

It is still throwing CORS error. Both Laravel backend and react app is depolyed over https. The CORS error is like this.

Access to XMLHttpRequest at ‘URL_of_laravel_backend’ from origin
‘URL_of_React_app’ 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.

The api configuration in React app is like this

import axios from "axios";

export const baseURL = "URL_of _laravel_backend";
export const axiosPublicInstance = axios.create({
  baseURL,
  headers: {
    "Content-Type": "application/json",
    "Access-Control-Allow-Origin": "*"
  },
});
Tags:

2

Answers


  1. 0

    you could add the urls to the "paths" key, for example

    <?php 
return [


   'paths' => [
                'api/*', 
                "example1/api/*", 
                "example1/example2/*", 
                "example3/example4/*"
           ],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => false,
    'max_age' => false,
    'supports_credentials' => false,  

];
    Login or Signup to reply.
  2. 0

    Please check your version
    php version : 8.1.23
    Laravel version : 10.28.0

    It seems like you have the necessary configuration and setup for handling CORS in your Laravel project.
    To further clarify the steps and provide proper documentation, here’s a summary of what you’ve done to
    resolve CORS issues when deploying your Laravel project with Plesk:

    1.Make sure you have the correct Laravel version and PHP version in your environment.

    2.In your composer.json, add the "fruitcake/php-cors" package with the desired version requirement:

     "require": {
    "fruitcake/php-cors": "^1.2"
}

    3.Run composer install to install the required packages.

    4.Use the php artisan vendor:publish –tag="cors" command to publish the CORS configuration file.
    This step is important because it allows you to customize CORS settings.

    5.In your Kernel.php file (usually located in app/Http/Kernel.php), add the following lines to enable CORS middleware:

    protected $middleware = [
    FruitcakeCorsHandleCors::class,
    // ...
];

protected $middlewareAliases = [
    'cors' => FruitcakeCorsHandleCors::class,
];

    With these configurations in place, your Laravel application should be ready to handle CORS requests.
    This allows your React JS frontend to communicate with your PHP Laravel backend without CORS-related issues when deployed with Plesk.

    By following these steps, you’ve properly set up CORS handling in your Laravel application.
    It should help you avoid CORS errors when making requests from your React JS frontend to your Laravel API.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search