Skip to content

Navigation Menu

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Laravel + React Admin CORS issue #2785

Unanswered
thewebartisan7 asked this question in Q&A
Discussion options

I have setup Laravel and API Platform successfully and everything works fine.

Now I am trying to install React admin as explained here: https://api-platform.com/docs/admin/getting-started/ but I get the CORS error below:

Screenshot 2024-10-23 at 18 42 42

The config/cors.php in Laravel seems already by default allowing localhost:3000 where react admin is running, see below:

<?php

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' => [env('FRONTEND_URL', 'http://localhost:3000')],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

I found other having same issues but like in docs solutions seems only for Symfony.

Thanks

You must be logged in to vote

Replies: 1 comment

Comment options

Hey! 👋

It sounds like you've configured CORS in Laravel to allow requests from localhost:3000, but you're still encountering a CORS issue with React Admin. Let’s go through some common troubleshooting steps to help solve this.

1. Double-Check CORS Settings

Your config/cors.php file looks mostly correct. Just make sure that:

  • Your .env file has FRONTEND_URL=http://localhost:3000 if you’re using the env function in allowed_origins.
  • You’ve run php artisan config:clear after making changes to the config/cors.php file to ensure the updated config is being used.

2. CORS and API Platform Configuration

If you're using API Platform as a gateway to your Laravel API, make sure the CORS settings are also correctly configured in API Platform. Sometimes API Platform has its own CORS settings, which might override Laravel’s.

Check your API Platform configuration (e.g., config/packages/api_platform.yaml if using Symfony) to ensure CORS is allowed for localhost:3000.

3. Confirm That Your React Admin Request Uses withCredentials

In React Admin, if your API requires credentials, ensure that your fetch calls include credentials: 'include'. Otherwise, your API might not accept the requests even if CORS is correctly set up.

// Example in React Admin setup
const dataProvider = jsonServerProvider('http://localhost:8000', fetchUtils.fetchJson, {
  credentials: 'include',
});

4. Test Without supports_credentials

CORS with credentials (supports_credentials set to true) can sometimes be tricky. Try setting 'supports_credentials' => false temporarily to see if that resolves the CORS issue. This can help identify if the issue is due to credential handling.

5. Check Browser Cache and DevTools

Browsers sometimes cache CORS policies. Clear your browser cache, and use DevTools (Console and Network tabs) to check for additional errors or details related to the CORS policy.

Summary

  1. Ensure FRONTEND_URL is correctly set in .env and run php artisan config:clear.
  2. Confirm API Platform’s CORS settings also allow requests from localhost:3000.
  3. Use credentials: 'include' in React Admin if needed.
  4. Test with 'supports_credentials' => false.
  5. Clear browser cache and re-check DevTools.

Let me know if this helps or if you need further troubleshooting steps! 😊

You must be logged in to vote
0 replies
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
2 participants
Morty Proxy This is a proxified and sanitized view of the page, visit original site.