{
  "$type": "site.standard.document",
  "bskyPostRef": {
    "cid": "bafyreid7mb6qy5lyymajthrlia5a4ie7lwm6d7rsoikhv4ncytnhbv3ypm",
    "uri": "at://did:plc:25rdn5elo5izoxrmtis34zuk/app.bsky.feed.post/3monhso23wd72"
  },
  "coverImage": {
    "$type": "blob",
    "ref": {
      "$link": "bafkreie5r52t5xrcdtfkd73a5iichb2rdrn7x33kwf2iaopwq3g6ncoppq"
    },
    "mimeType": "image/webp",
    "size": 67098
  },
  "path": "/khushindpatel/if-everything-is-running-on-localhost-why-do-we-still-get-cors-errors-58k5",
  "publishedAt": "2026-06-19T13:36:32.000Z",
  "site": "https://dev.to",
  "tags": [
    "api",
    "beginners",
    "frontend",
    "webdev"
  ],
  "textContent": "One question almost every frontend developer asks at some point:\n\n> \"My frontend is running on localhost:3000 and my backend is running on localhost:5000. Both are on my own machine. Why am I still getting a CORS error?\"\n\nIt feels strange because both applications are literally running on the same laptop.\n\nThe answer lies in how browsers define an **Origin**.\n\n##  What Is an Origin?\n\nAn origin is made up of:\n\n\n\n    Protocol + Domain + Port\n\n\nFor example:\n\n\n\n    http://localhost:3000\n\n\nand\n\n\n\n    http://localhost:5000\n\n\nhave:\n\n  * Same protocol ✅\n  * Same domain ✅\n  * Different ports ❌\n\n\n\nBecause the ports are different, the browser treats them as two different origins.\n\n##  What Happens During a Request?\n\nImagine your React app is running on:\n\n\n\n    http://localhost:3000\n\n\nand it calls:\n\n\n\n    fetch(\"http://localhost:5000/users\");\n\n\nFrom the browser's perspective:\n\n\n\n    Origin A → localhost:3000\n    Origin B → localhost:5000\n\n\nThis is considered a cross-origin request.\n\n##  Why Does the Browser Care?\n\nImagine if websites could freely call APIs from any origin.\n\nA malicious website could:\n\n  * Read your banking data\n  * Access your private APIs\n  * Perform actions on your behalf\n\n\n\nTo prevent this, browsers enforce the **Same-Origin Policy**.\n\nBy default:\n\n\n\n    Website A cannot access Website B's resources\n\n\nunless Website B explicitly allows it.\n\n##  How Does CORS Solve This?\n\nCORS stands for:\n\n**Cross-Origin Resource Sharing**\n\nIt is simply a mechanism that lets the server tell the browser:\n\n> \"Yes, I trust requests coming from this origin.\"\n\nExample response header:\n\n\n\n    Access-Control-Allow-Origin: http://localhost:3000\n\n\nNow the browser allows the frontend to access the response.\n\n##  Important Thing To Understand\n\nThe backend usually receives the request successfully.\n\nThe CORS error is often raised by the browser after receiving the response.\n\nThe flow looks like:\n\n\n\n    Frontend\n        ↓\n    Backend Receives Request ✅\n        ↓\n    Backend Sends Response ✅\n        ↓\n    Browser Blocks Response ❌\n\n\nThat's why you sometimes see the API hit in your backend logs but still get a CORS error in the browser.\n\n##  Why Doesn't Postman Show CORS Errors?\n\nBecause CORS is a browser security feature.\n\nTools like:\n\n  * Postman\n  * cURL\n  * Insomnia\n\n\n\ndon't enforce browser security policies.\n\nSo the same request works perfectly there.\n\n##  The Key Takeaway\n\nEven though both applications are running on the same machine:\n\n\n\n    localhost:3000\n    localhost:5000\n\n\nthey are considered different origins because the ports are different.\n\nThe browser doesn't care that they're on the same laptop. It only cares about the origin.\n\nThat's why CORS exists, and that's why adding the correct `Access-Control-Allow-Origin` header fixes the issue.",
  "title": "If Everything Is Running on Localhost, Why Do We Still Get CORS Errors?"
}