Tired of CORS Errors? Try This Local Dev Hack

A simple fix that saved me hours of frustration — no backend changes required.

CORS Error

Non-Member? Click here to read for free

😤 The Developer Struggle

You’re building a React or Next.js frontend. You’re trying to fetch data from an API. You hit send and…

Access to fetch at 'https://api.example.com/data'
from origin 'http://localhost:3000' has been blocked
by CORS policy.

Boom. CORS error.

If you’ve been there, you know the pain.

⚠️ Why Does This Even Happen?

CORS (Cross-Origin Resource Sharing) is a security feature built into browsers. It prevents frontend code on localhost:3000 from making requests to a different origin (say api.example.com) unless that server explicitly allows it.

And unless you control the backend… you’re stuck.

Or at least, I thought I was.

🪄 The Hack That Saved Me: A Proxy

Instead of begging the API team to add CORS headers, I used a local proxy to tunnel my frontend requests through the same origin.

Here’s how I did it:

1. Install http-proxy-middleware

npm install http-proxy-middleware

2. Add this to your src/setupProxy.js (for Create React App):

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function (app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'https://api.example.com',
      changeOrigin: true,
      pathRewrite: {
        '^/api': '', // removes `/api` before forwarding
      },
    })
  );
};

3. Now, in your frontend code:

fetch('/api/data') // instead of https://api.example.com/data

Done. ✅ No more CORS issues.

⚙️ Bonus: Next.js Setup

In Next.js, create next.config.js like this:

module.exports = {
  async rewrites() {
    return [
      {
        source: '/api/:path*',
        destination: 'https://api.example.com/:path*',
      },
    ];
  },
};

You can now use /api/... in your frontend code and Next.js will proxy it server-side — solving CORS without touching the backend.

🤯 Why This Works

Because the proxy makes the request on your behalf, from the server (or dev server), not from the browser. So, no CORS policy is violated.

It feels almost illegal. But it’s not.

🛠 Tools I Use

• [http-proxy-middleware](https://github.com/chimurai/http-proxy-middleware)
• Next.js Rewrites
• cors-anywhere (for testing)

🧠 Final Thoughts

If you’re just getting started with APIs, CORS can feel like a black hole of confusion. But you don’t have to wait for backend changes. Just proxy it.

This saved me days of delay in production-ready apps. Hope it helps you too.

💡 Quick Fix Summary:
- CORS errors happen when frontend & backend are on different origins
- Use a proxy to send requests *from* your dev server, not browser
- For React, use `http-proxy-middleware`
- For Next.js, use `rewrites()` in `next.config.js`