CORS Error in React: Understand and Fix It Quickly

🛑 CORS Error in React: Why It Happens & How to Fix It (Easily)

Ever seen this frustrating error while building your frontend project?

Access to fetch at 'https://www.swiggy.com/...' from origin 'http://localhost:1234' 
has been blocked by CORS policy...

👀 What’s Going On?

This is a CORS (Cross-Origin Resource Sharing) issue.
CORS is a browser security mechanism that prevents your website (running on one domain like localhost:1234) from calling an API (on a different domain like swiggy.com) unless that API explicitly allows it.

---

🧠 What is CORS?

• By default, browsers block API requests from a different origin.

• It's meant to protect users from malicious websites.

• APIs must include special HTTP headers (like Access-Control-Allow-Origin) to allow calls from other origins.

---

⚠️ Why You're Seeing This

You're building a React app locally (http://localhost:1234)
You’re trying to fetch() data from Swiggy’s live server (https://www.swiggy.com)
But... Swiggy’s API doesn't allow requests from localhost.

So... browser blocks it.

Think of CORS as a gatekeeper for web requests. Your browser, acting as this gatekeeper, checks if the website making the request (your React app) has explicit permission from the server it's trying to access (like Swiggy's API). If that permission (in the form of specific HTTP headers) isn't granted, the browser blocks the request to protect your data and security.

---

✅ Quick Fix: Use a Chrome Extension

During development, you can bypass CORS locally using an extension:

🔗 CORS Unblock Extension
Install: Allow CORS: Access-Control-Allow-Origin

🔧 How to Use It

1. Install the extension.

2. Click on the extension icon and enable it (toggle ON).

3. Reload your page.

4. 🧙 Now your fetch() request should work!

⚠️ This works only in development.
In production, the backend must handle CORS properly.

---

Pro Tip for Production

• Use a proxy backend (like Node.js/Express) to call external APIs.

• Or make sure the external API supports CORS and sends the correct headers.

---

📌 TL;DR