Fix CORS Error in Laravel API with React, Next.js, and Express

How to Fix CORS Errors in Laravel and Express APIs with React or Next.js

If you are building a modern web application with Laravel, React, Next.js, Node.js, or Express, you will probably face a CORS error at some point.

A common error looks like this:

Access to fetch at 'http://localhost:8000/api/users' from origin 'http://localhost:3000' has been blocked by CORS policy.

This usually happens when your frontend and backend run on different domains or ports.

For example:

Frontend: http://localhost:3000
Backend:  http://localhost:8000

The browser blocks the request because the backend has not allowed the frontend origin.

What is CORS?

CORS means Cross-Origin Resource Sharing.

It is a browser security feature that controls which frontend domains are allowed to call your backend API.

CORS is not a React problem, not a Next.js problem, and not always a Laravel problem. It is usually a backend configuration issue.

Fix CORS in Laravel API

Open your Laravel CORS config file:

config/cors.php

Use a production-friendly setup like this:

return [
    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [
        env('FRONTEND_URL', 'http://localhost:3000'),
    ],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,
];

Then add your frontend URL in .env:

FRONTEND_URL=http://localhost:3000

After changing config, clear Laravel cache:

php artisan config:clear
php artisan cache:clear

If you are using Laravel Sanctum, also check:

SANCTUM_STATEFUL_DOMAINS=localhost:3000,127.0.0.1:3000
SESSION_DOMAIN=localhost

Fix CORS in Express.js API

If your backend is built with Node.js and Express, install the CORS package:

npm install cors

Then configure it:

import express from "express";
import cors from "cors";

const app = express();

app.use(cors({
  origin: process.env.FRONTEND_URL || "http://localhost:3000",
  credentials: true,
}));

app.use(express.json());

In your .env:

FRONTEND_URL=http://localhost:3000

This allows your React or Next.js frontend to call your Express API safely.

React or Next.js API Request Example

If you use Axios:

import axios from "axios";

const api = axios.create({
  baseURL: process.env.NEXT_PUBLIC_API_URL,
  withCredentials: true,
});

export default api;

In your frontend .env:

NEXT_PUBLIC_API_URL=http://localhost:8000/api

If you use fetch:

const response = await fetch("http://localhost:8000/api/users", {
  method: "GET",
  credentials: "include",
});

Common CORS Mistakes

1. Using * with credentials

This is wrong when using cookies or authentication:

allowed_origins = *
supports_credentials = true

If credentials are enabled, you must use a specific frontend URL.

2. Forgetting to clear Laravel config cache

After changing .env or config/cors.php, run:

php artisan config:clear

3. Wrong frontend URL

These are different origins:

http://localhost:3000
http://127.0.0.1:3000

Use the exact URL your frontend is running on.

4. Fixing CORS only in the frontend

CORS must be allowed by the backend. Adding random headers in React or Next.js will not fix the real issue.

Production Setup

For production, never allow every origin.

Use your real frontend domain:

FRONTEND_URL=https://yourdomain.com

For Laravel:

'allowed_origins' => [
    env('FRONTEND_URL'),
],

For Express:

app.use(cors({
  origin: process.env.FRONTEND_URL,
  credentials: true,
}));

Final Thoughts

CORS errors are common when building full-stack applications with Laravel, React, Next.js, Node.js, and Express.

The best way to fix them is:

• Allow the correct frontend origin from the backend
• Use specific URLs instead of *
• Enable credentials only when needed
• Clear backend config cache
• Keep local and production environment variables separate

Once you understand the flow, CORS becomes easy to debug and configure.