How to Fix CORS Errors in Laravel / Node.js

If you have ever connected a frontend application to a backend API, you have probably run into the dreaded CORS error. It usually looks something like this in your browser console:

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

This message appears when your frontend and backend are running on different domains, subdomains, or ports. The browser blocks the request because the server has not given permission for cross-origin requests.

In this guide we will look at what CORS actually is and then go through practical fixes for both Laravel and Node.js.

---

What is CORS?

CORS stands for Cross-Origin Resource Sharing. It is a security feature built into browsers to prevent websites from making requests to a different origin without permission.

An “origin” is made up of three parts:

• Protocol (http or https)
• Domain (example.com)
• Port (:3000, :8000, etc.)

If any of these are different between your frontend and backend, the browser treats it as cross-origin. To allow it, your server needs to send the right CORS headers.

---

Fixing CORS in Laravel

Laravel makes this fairly simple thanks to middleware. The framework has a package called Fruitcake Laravel CORS which is included by default in Laravel 7 and above.

Step 1: Install the package (if you are on Laravel 6 or below)

composer require fruitcake/laravel-cors

Step 2: Publish the configuration

php artisan vendor:publish --provider="Fruitcake\Cors\CorsServiceProvider"

This will create a file at config/cors.php.

Step 3: Configure your settings

Open config/cors.php and update it as needed. A simple example that allows everything during development is:

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

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

'supports_credentials' => false,

For production, you should not leave everything as *. Instead, restrict allowed_origins to the domains you trust, for example:

'allowed_origins' => ['https://yourfrontend.com'],

Step 4: Clear cache

Run:

php artisan config:clear

Your Laravel API should now accept requests from your frontend.

---

Fixing CORS in Node.js

If you are building with Node.js and Express, the easiest way to fix CORS errors is to use the cors package.

Step 1: Install the package

npm install cors

Step 2: Import and use it

In your app.js or main server file:

const express = require('express');
const cors = require('cors');
const app = express();

// Allow all origins (development only)
app.use(cors());

// Or restrict to a specific origin
// app.use(cors({ origin: 'https://yourfrontend.com' }));

app.get('/api/data', (req, res) => {
  res.json({ message: 'CORS is working!' });
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

By default, cors() allows all origins. This is fine for local development but not secure for production. Always restrict it to your actual frontend domain when going live.

---

Common Mistakes to Avoid

• Forgetting to restart your server after changing configuration.
• Using * in production for allowed origins. This can expose your API to abuse.
• Mixing HTTP and HTTPS. If your frontend is on HTTPS and your backend is not, browsers may still block requests.

---

Final Thoughts

CORS errors can be frustrating, but once you understand what causes them, the fix is straightforward. In Laravel, adjust the cors.php config file. In Node.js, install the cors package and set it up with Express.

When developing locally, it is fine to allow everything. In production, always limit access to trusted domains. Doing this will keep your API secure while still allowing your frontend to communicate with it.