# Step 1 — Understand What CORS Is

• Browsers implement CORS for security, preventing web pages from requesting resources from a different origin unless explicitly allowed.

• A typical error looks like:

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

• “Origin” = protocol + domain + port

• Backend must allow the frontend origin to access its resources

---

## Step 2 — Check the Browser Console

Open your browser’s developer tools:

• Chrome: F12 → Console

• Firefox: F12 → Console

Look for:

• Access-Control-Allow-Origin errors

• Failed network requests (HTTP status 403/404/500)

---

## Step 3 — Enable CORS in Backend

Depending on your backend language/framework:

Node.js (Express)

Install cors package:

npm install cors

Enable it:

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

app.use(cors()); // allow all origins

// OR restrict to specific origin
app.use(cors({
  origin: 'http://localhost:3000'
}));

---

Python (Flask)

Install Flask-CORS:

pip install flask-cors

Enable it:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # allow all origins

---

PHP

Add headers at the top of your script:

header("Access-Control-Allow-Origin: *"); // allow all
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type");

---

## Step 4 — Handle Preflight Requests

• For HTTP methods like PUT, DELETE, or custom headers, browsers send a preflight OPTIONS request.

• Ensure backend responds correctly:

app.options('*', cors()); // Express example

• Without this, even allowed origins may fail

---

## Step 5 — Test After Changes

1. Restart backend server

2. Clear browser cache

3. Reload frontend and check console

Successful requests → CORS fixed

---

## Step 6 — Use Proxy as a Temporary Workaround

For local development, you can use a proxy to bypass CORS:

• React (package.json):

"proxy": "http://localhost:5000"

• Vue / Angular → configure dev server proxy

Note: Proxy is for development only. Proper CORS headers must be set in production.

---

## Step 7 — Security Considerations

• Avoid Access-Control-Allow-Origin: * in production if sensitive data is involved

• Restrict origins to trusted domains only

• Enable HTTPS to prevent mixed-content issues

---

## Beginner-Friendly Checklist

---

## Conclusion

CORS errors are a browser security feature, not a bug. By understanding:

• The origin and request mechanism

• How to enable CORS headers in your backend

• Handling preflight requests

• Using development proxies when needed

Even beginners can solve CORS errors confidently and make frontend-backend communication smooth.