Home » How to Fix CORS Access-Control-Allow-Origin Error
Web & Code

How to Fix CORS Access-Control-Allow-Origin Error

Quick Diagnostics

The CORS (Cross-Origin Resource Sharing) error occurs strictly in the client's browser. It happens when a web application on one domain (e.g., localhost:3000) tries to consume resources from an API hosted on another domain, and the API server does not include the necessary HTTP headers to authorize the request.

🚀 Step-by-Step Solution

The correct way to solve this is to configure the Backend (server) to accept requests from your client. Never use browser extensions in production environments.

Step 1: Node.js (Express) Solution

Install the official CORS middleware in your project:

BASH
npm install cors

Then, implement it by restricting access only to your trusted domains:

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

const corsOptions = {
  origin: 'https://yourwebsite.com', // Your frontend domain
  optionsSuccessStatus: 200
};

app.use(cors(corsOptions));

Step 2: Native HTTP Headers Solution

If you handle server responses manually, make sure to inject the following header into the response headers:

HTTP
Access-Control-Allow-Origin: https://yourwebsite.com

Prevention Advice

Recommended security practices:

  • Avoid using the wildcard * in production environments as it exposes your API publicly.
  • Properly configure allowed methods (GET, POST, PUT, DELETE).