How Browsers Enforce the Same-Origin Policy on fetch
The same-origin policy is a core browser security model that determines whether a web page can access resources from a given URL. The practical effect of this policy is easy to demonstrate with fetch requests to different targets.
A demo page is hosted at https://same-origin-policy-fetch.glitch.me. It uses fetch to load a resource from https://same-origin-policy-fetch.glitch.me/fetch.html. Because index.html and fetch.html share the same origin, the request succeeds and returns a status code of 200.
Cross-Origin Requests Are Blocked by Default
Change the fetch URL to https://www.google.com. The browser blocks the request because you are attempting to load a resource from a different origin. This behavior is a fundamental security boundary: even if an attacker manages to take control of a user's browser, that attacker still cannot read resources from other origins.
CORS Allows Controlled Exceptions
Now try changing the fetch URL to https://api.thecatapi.com/v1/images/search. The origin is different, yet the fetch returns a status code of 200.
Modern web apps routinely load third-party scripts and query external APIs, so browsers provide a mechanism called CORS (Cross Origin Resource Sharing) to permit such requests. When a server sends the appropriate CORS headers, it tells the browser that loading its cross-origin resource is allowed for the requesting page.
