Understanding CORS: Why It Can Block Your App and How to Fix It.

Building your first full-stack app is exciting… until you meet an enemy you didn’t even know existed:

CORS (Cross-Origin Resource Sharing).

CORS is a browser security feature that prevents unauthorized cross-origin requests. While it’s essential for protecting users, it can completely block your app in production if not handled correctly.

When I deployed my first full-stack project, everything worked locally. Google OAuth worked. Cookies worked. API requests worked. But once in production, cookies refused to save, OAuth stopped redirecting, and requests were blocked silently. I spent weeks debugging the wrong thing, thinking my OAuth logic was broken—only to discover it was CORS all along.

Here’s how you can avoid my mistakes and handle CORS properly.

1. Why CORS Isn’t Usually a Problem in Development

During development:

• Frontend runs on http://localhost:3000

• Backend runs on http://localhost:5000

Some browsers are forgiving, or dev tools allow bypassing strict checks. That’s why your OAuth and cookies seem to work locally.

Lesson: Never assume that working locally means deployment will be smooth.

2. Basic Backend CORS Setup

For a Node.js/Express backend, use the cors package:

3. Handling Preflight Requests (OPTIONS)

Certain requests — POST with JSON, custom headers, or PUT/DELETE — trigger a preflight OPTIONS request:

Or globally:

Tip: Postman doesn’t trigger preflight requests, so your API may appear fine there but fail in the browser.

4. Setting Cookies Across Domains

If your app sets cookies (like for sessions or OAuth), ensure:

And your frontend fetch must include credentials:

Without credentials: 'include', cookies will not be sent or received.

5. Production Considerations

• Domain changes: http://localhost → https://myapp.com. Update your origin in the CORS configuration.

• Reverse proxies / hosting platforms: Platforms like Vercel, Netlify, AWS, or Cloudflare may strip headers. Ensure they forward CORS headers correctly.

• HTTPS: Secure cookies require HTTPS. Mixed content (HTTP/HTTPS) will be blocked.

  
  

6. Debugging CORS Efficiently

When a request fails:

1. Check the browser console → look for blocked by CORS policy.

2. Check your server response headers → Access-Control-Allow-Origin, Access-Control-Allow-Credentials.

3. Test preflight OPTIONS requests with curl:

4. Confirm reverse proxies aren’t stripping headers.

CORS can delay beginners because:

• Errors are vague.

• Development works, production fails.

• Cookies and OAuth are silently blocked.

• Multiple layers (backend, proxy, hosting) affect it.

  
  

Avoid delays by:

1. Configuring your backend with the correct origin and credentials.

2. Handling preflight OPTIONS requests properly.

3. Including credentials in fetch requests.

4. Testing in production-like environments.

5. Checking reverse proxy or hosting platform settings.

CORS Checklist for Developers

•  Backend allows production domain.

•  credentials: true for cookies/OAuth.

•  Preflight OPTIONS requests handled.

•  Cookies set with SameSite: None and Secure: true.

•  Reverse proxy or hosting forwards CORS headers.

•  Testing done on a real domain & HTTPS.

Following these steps will save you weeks of frustration, as it did for me.

If you still fall into the CORS trap, don’t worry — it’s not the end of the world. Just go back to the checklist I provided, and you’ll get it working.