Why the Swiggy API Blocks Localhost and How to Work Around It

Why the Swiggy API Blocks Localhost and How to Work Around It

A common frustration: the Swiggy API works in production but blocks your localhost React app. Here is why that happens and how to work around it.

Why Localhost Is Blocked

The API server checks the Origin header of the request. Localhost is not in its list of allowed origins, so the server does not return the CORS headers the browser needs, and the browser blocks the response.

It Is the Browser, Not the Server

The request actually reaches the server and the server responds. The browser blocks the response because the server did not grant your origin permission. This is why the same URL works in Postman but not in your React app.

Workaround 1: A Development Proxy

The cleanest fix is a proxy. Your bundler or a small backend forwards the request from a server-side origin, which avoids the browser's CORS rules entirely.

Workaround 2: A CORS Browser Extension

A quick and dirty fix is a browser extension that disables CORS for development. It works for testing but is not a real solution and must never be used in production.

Workaround 3: Mock the Data

If the API is too unreliable in development, mock the response data locally. This keeps your work unblocked and is fine while you are focusing on UI.

Why You Should Not Disable CORS in Production

CORS exists for security. Disabling it in production opens your users to risks. The right production fix is to call the API through your own backend, which adds the correct CORS headers.

The Takeaway

The Swiggy API blocks localhost because of CORS and the Origin header. Use a development proxy for a clean fix, a browser extension only for quick testing, and route through your own backend in production.