CORS — Why Your API Calls Get Blocked (and How to Fix It)
Understanding same-origin policy, CORS headers, and common fixes for cross-origin request issues
14 min readsecurity, cors, api, browser-security
You're building a frontend, you make a fetch request to an API, and you get this error:
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present
on the requested resource.This is one of the most common errors in web development, and one of the most confusing. It's not really an error with your code — it's the browser enforcing a security policy. Let's break down what's happening and how to fix it properly.
The Same-Origin Policy
To understand CORS, you first need to understand the Same-Origin Policy — the fundamental security rule that browsers enforce.
An "origin" is the combination of three things:
- Protocol:
httporhttps - Domain: `example.c
This lesson is part of the Guild Member curriculum. Plans start at $29/mo.