How to Handle CORS Errors When Calling the Swiggy API

How to Handle CORS Errors When Calling the Swiggy API

CORS errors are the single most common issue when calling the Swiggy API from a React app. Here is exactly how to handle them.

What a CORS Error Means

The browser blocked the response because the server did not grant your origin permission. The request reached the server; the browser just refused to give you the response.

Why It Happens With the Swiggy API

The API does not include your localhost or your domain in its allowed origins, so it does not return the CORS headers the browser requires.

Fix in Development: Use a Proxy

Configure a proxy in your bundler or run a small backend proxy. The proxy makes the request from a server-side origin, bypassing the browser's CORS rules entirely.

Fix in Development: Browser Extension

For quick testing, a CORS-disabling browser extension works. It is not a real solution and must never reach production.

Fix in Production: Backend Proxy

In production, call the API through your own backend, which can forward the request and add correct headers. Never expose the user to raw third-party CORS issues.

Do Not Disable CORS in the Browser for Users

CORS protects users. Telling users to disable it is not a fix; it is a security risk. The real fix is always server-side.

The Takeaway

CORS errors mean the server did not allow your origin. Use a proxy in development and route through your own backend in production. Never ask users to disable CORS.