CORS error

Error Message

Access to XMLHttpRequest blocked by CORS policy: No Access-Control-Allow-Origin header

Cause

The API request is being blocked by the browser's Cross-Origin Resource Sharing policy. The server doesn't include the required CORS headers.

Solution

Configure CORS in config/cors.php. Add the frontend\'s domain to allowed_origins. For local development, add http://localhost:3000 or your dev server URL.

Code Example

Fix

// config/cors.php
return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],
    'allowed_methods' => ['*'],
    'allowed_origins' => [config('app.frontend_url', 'http://localhost:3000')],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

Debugging Steps

Check config/cors.php configuration
Verify the frontend domain is in allowed_origins
Check if the route is in the cors paths
Inspect the Response headers in browser DevTools
Run php artisan config:clear after changes

Prevention

Configure CORS properly for each environment. Use specific origins instead of * in production. Include the frontend URL in Sanctum's stateful domains.