DEV Community

Cover image for Fix Common CORS Errors in APIs and Frontend Apps
Rafli Zocky
Rafli Zocky

Posted on Originally published at Medium

Fix Common CORS Errors in APIs and Frontend Apps

#webdev #api #javascript #laravel

I've spent many hours solving this…

Cross-Origin Resource Sharing (CORS) errors are a regular part of web development. More info: MDN CORS Guide.

Issue 1: No Access-Control-Allow-Origin Header 

Access to XMLHttpRequest blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Enter fullscreen mode Exit fullscreen mode

The frontend is calling a backend endpoint without proper CORS configuration. Fix:

'allowed_origins' => [
    'http://localhost:3000',
    'http://localhost:5173',
],
Enter fullscreen mode Exit fullscreen mode

For Laravel 11+:

php artisan config:publish cors
Enter fullscreen mode Exit fullscreen mode

Then edit config/cors.php. Most frameworks have built-in CORS support — look for config files or middleware.

Issue 2: Credentials with Wildcard Origins 

The 'Access-Control-Allow-Origin' header value must not be '*' when the
request's credentials mode is 'include'.
Enter fullscreen mode Exit fullscreen mode

Using withCredentials: true with allowed_origins: ['*'] is not allowed by browsers. Specify exact trusted origins:

const api = axios.create({
  baseURL: "http://127.0.0.1:8000",
  withCredentials: true,
});
Enter fullscreen mode Exit fullscreen mode 
'allowed_origins' => ['https://yourdomain.com'], // NOT ['*']
'supports_credentials' => true,
Enter fullscreen mode Exit fullscreen mode

Issue 3: Wrong API Endpoint

Calling /login instead of /api/login — accidentally hitting the web route instead of the API route.

# Check your routes first
php artisan route:list | grep login
Enter fullscreen mode Exit fullscreen mode 
// Fix the endpoint
const response = await api.post('/api/login', data); // Add /api prefix
Enter fullscreen mode Exit fullscreen mode

Issue 4: Config Changes Not Applied 

# Clear all cache in Laravel
php artisan optimize:clear

# Restart dev server
ctrl + c
npm run dev
Enter fullscreen mode Exit fullscreen mode

Most problems stem from configuration mismatches rather than complex setup issues.

Need help building your app?
I'm available for freelance web & Android development — raflizocky.netlify.app

☕ Support my writing: paypal.me/raflizocky · saweria.co/raflizocky

Top comments (0)