<h2>Introduction</h2>
<p>If you’ve ever seen this error in your browser console:</p>
<pre><code>Access to fetch at 'http://api.example.com/data' from origin 'http://localhost:3000' 

has been blocked by CORS policy</code></pre> <p>That’s a <strong>CORS (Cross-Origin Resource Sharing)</strong> issue. It happens when your frontend (React, Angular, etc.) tries to request data from a backend API on a different domain or port without proper permissions.</p>

<h3>What is CORS?</h3>
<p>CORS is a browser security feature that restricts cross-origin HTTP requests to protect users from malicious sites.</p>

<h3>1. Fixing CORS in Backend (Best Practice)</h3>
<p>Add the correct response headers from the server.</p>

<h4>Node.js (Express)</h4>
<pre><code>const express = require("express");

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

app.use(cors()); // allow all origins // OR app.use(cors({ origin: "http://localhost:3000" })); // allow specific origin

app.get("/data", (req, res) => { res.json({ msg: "CORS fixed!" }); });

app.listen(4000);</code></pre>

<h4>PHP</h4>
<pre><code>&lt;?php

header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); ?></code></pre>

<h4>Django (Python)</h4>
<pre><code># install

pip install django-cors-headers

settings.py

INSTALLED_APPS = [ ... "corsheaders", ] MIDDLEWARE = [ "corsheaders.middleware.CorsMiddleware", ... ] CORS_ALLOWED_ORIGINS = [ "http://localhost:3000", ]</code></pre>

<h3>2. Using a Proxy (Frontend Workaround)</h3>
<p>If you can’t modify the backend, you can proxy API requests.</p>

<h4>React (Vite)</h4>
<pre><code>// vite.config.js

export default defineConfig({ server: { proxy: { "/api": "http://localhost:4000", }, }, });</code></pre>

<h4>React (Create React App)</h4>
<pre><code>// package.json

"proxy": "http://localhost:4000"</code></pre>

<h3>3. Temporary Browser Fix (Not Recommended for Production)</h3>
<p>You can disable CORS in the browser for testing, but this is unsafe.</p>
<pre><code># Chrome (Mac/Linux)

chrome --disable-web-security --user-data-dir="/tmp/chrome_dev"</code></pre>

<h3>4. Use a CORS Proxy Service</h3>
<p>For APIs you don’t own, use a public proxy:</p>
<pre><code>fetch("https://cors-anywhere.herokuapp.com/http://api.example.com/data")

.then(res => res.json()) .then(data => console.log(data));</code></pre>

<h3>Best Practices</h3>
<ul>
  <li>Always prefer fixing CORS at the backend.</li>
  <li>Allow only trusted domains instead of <code>*</code>.</li>
  <li>Use HTTPS everywhere.</li>
</ul>

<h3>Conclusion</h3>
<p>CORS errors are frustrating, but they protect users from unsafe cross-site requests. Always fix them at the server when possible, and use proxies only as temporary solutions.</p>