Introduction
If you're using Laravel 12 to build APIs for a frontend app like React, Vue, or Angular, you might run into a common problem:
"There is no 'Access-Control-Allow-Origin' header on the resource you asked for."
This is a Cross-Origin Resource Sharing (CORS) error. It usually happens when your front end and back end are on different ports or domains. Laravel 12 says it has built-in CORS support, but many developers still have problems because they haven't set it up correctly or have missed steps.
This guide will show you how to fix and debug CORS problems in Laravel 12 the right way.
What is CORS, and why does it matter?
Cross-Origin Resource Sharing (CORS) is a security feature in browsers that stops HTTP requests from one domain to another. For instance:
Frontend: http://localhost:3000
Backend API: http://localhost
The browser blocks the request unless the server says it's okay because these are seen as coming from different places.
Why Postman Works but Not the Browser
One thing that is confusing is that your API works fine in Postman but not in the browser.
This happens because:
CORS policies are NOT enforced by Postman.
Browsers strictly follow the rules of CORS.
So, even if your API is working, the browser will block it unless the right headers are set up.
How to Fix the Laravel 12 CORS Error Step by Step
1. Set up and publish CORS
First, make sure that the CORS configuration file is available:
php artisan publish cors config
Then change config/cors.php like this:
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['http://localhost:3000', 'http://127.0.0.1:3000'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 600,
'supports_credentials' => false,
Important Tip:
Always add the full URL, which should start with http:// or https://. It won't work if you only type localhost:3000.
2. Look at the API routes
In routes/api.php, make sure that your routes are set up correctly:
Route::get('/show/{id}', [EmailController::class, 'show']);
Route::post('/search', [EmailController::class, 'search']);
Route::post('/search2', [EmailController::class, 'search2']);
These routes need to match the paths you set up in your CORS config (api/*).
3. Check the middleware setup
In Laravel 12, you set up middleware in the app.php. You need to ensure that CORS middleware is active.
Example:
->withMiddleware(function (Middleware $middleware): void {
$middleware->append(\Illuminate\Http\Middleware\HandleCors::class);
})
Laravel will NOT send CORS headers if this middleware is not present.
4. Handle Preflight Requests (OPTIONS)
Before the real request, browsers send a preflight request (OPTIONS).
You will see this error if your server does not handle OPTIONS requests correctly:
The answer to the preflight request doesn't pass the access control check.
Make sure your server allows OPTIONS requests to fix this:
Route::options('{any}', function () {
return response()->json([], 200);
})->where('any', '.*');
5. Restart the server and clear the cache.
Laravel saves configurations in memory, so changes may not take effect right away.
Type these commands:
php artisan clear config
php artisan clear cache
php artisan clear route
Then start your server again:
php artisan serve
6. Look at .env and APP_URL
Make sure that your .env file is set up correctly:
APP_URL=http://localhost
CORS problems can also happen when URLs don't match.
7. Debug Headers in Browser
Open Developer Tools → Network tab → Select your request → Check Response Headers.
You should check out:
Allow-Origin: http://localhost:3000
CORS is not set up correctly if this header is not there.
Things You Shouldn't Do
Here are the main reasons why CORS doesn't work in Laravel 12:
Allowed origins are missing http://
CORS middleware not set up
Paths are set up incorrectly
Not clearing the Laravel cache
The backend isn't working. OPTIONS calls
Using the wildcard * with credentials turned on
Best Ways to Use Laravel CORS
To keep things from going wrong in the future:
Always say where something came from instead of *
Make sure the CORS configuration is simple and clean.
For production, use a configuration based on the environment.
Not just Postman, but real browsers for testing
Keep track of incoming requests for debugging
Conclusion
CORS errors in Laravel 12 can be very annoying, especially when everything looks right. But the problem usually comes down to a few main things: the wrong format for the origin, missing middleware, or preflight requests that aren't handled.
You can quickly fix the "No Access-Control-Allow-Origin header" error by correctly setting up config/cors.php, making sure middleware is on, and clearing the cache.
If you follow the steps in this guide, your Laravel API and frontend app will work together without any CORS problems.
No comments:
Post a Comment