Short tale of how frontends and backends talk

A Day at the Backend Embassy Once upon a time in Webland, there was a grand building called the Backend Embassy. This building held all the secrets and data of a powerful kingdom — services, user data, currency prices — everything. But it wasn’t open to just anyone. Out front, a friendly but strict API Secretary sat behind a reception desk. She managed all the requests, deciding who could go in and what they could ask for. Now, our hero — a curious Frontend Developer — wanted to get some information. He didn’t want to go through a backend server of his own; instead, he sent a request straight from his Frontend App, running right out of his browser in the village of http://localhost:5173. When the messenger arrived at the Backend Embassy, the CORS Guard stepped in. “Hold on,” said the CORS Guard. “Where are you from?” “From the village of localhost:5173, sent directly by the browser,” replied the messenger. The CORS Guard looked at the API Secretary. “Do we trust that origin? Did the API include a header saying ‘Access-Control-Allow-Origin: http://localhost:5173’?” The secretary checked the papers and shook her head. “Nope. The API didn’t mention them.” “Then I can’t let you through,” the CORS Guard said. “You’ll have to go back. Security policy.” The browser messenger returned empty-handed. Even though the API had the answer, the CORS policy blocked the response, because the request didn’t come from an approved origin. The frontend developer scratched his head. “So I can’t talk to the API directly from the browser unless they trust me?” He called a friend who owned a Backend Server in a nearby town. “Hey, can you go talk to the API Secretary on my behalf? The CORS Guard doesn’t block backend servers.” The backend agreed. It passed through the gate easily, retrieved the data, and brought it back to the frontend. The frontend now had what it needed — by going through a trusted backend proxy :)))))) Moral of the Story: CORS is a browser rule enforced by a security guard between frontend and backend. The browser checks if the API allows the origin. If not, the response is blocked — even if it's sent."

Apr 29, 2025 - 14:48

Short tale of how frontends and backends talk

A Day at the Backend Embassy

Once upon a time in Webland, there was a grand building called the Backend Embassy. This building held all the secrets and data of a powerful kingdom — services, user data, currency prices — everything. But it wasn’t open to just anyone.

Out front, a friendly but strict API Secretary sat behind a reception desk. She managed all the requests, deciding who could go in and what they could ask for.

Now, our hero — a curious Frontend Developer — wanted to get some information. He didn’t want to go through a backend server of his own; instead, he sent a request straight from his Frontend App, running right out of his browser in the village of http://localhost:5173.

When the messenger arrived at the Backend Embassy, the CORS Guard stepped in.

“Hold on,” said the CORS Guard. “Where are you from?”
“From the village of localhost:5173, sent directly by the browser,” replied the messenger.
The CORS Guard looked at the API Secretary. “Do we trust that origin? Did the API include a header saying ‘Access-Control-Allow-Origin: http://localhost:5173’?”

The secretary checked the papers and shook her head. “Nope. The API didn’t mention them.”
“Then I can’t let you through,” the CORS Guard said. “You’ll have to go back. Security policy.”
The browser messenger returned empty-handed. Even though the API had the answer, the CORS policy blocked the response, because the request didn’t come from an approved origin.

The frontend developer scratched his head. “So I can’t talk to the API directly from the browser unless they trust me?”
He called a friend who owned a Backend Server in a nearby town.

“Hey, can you go talk to the API Secretary on my behalf? The CORS Guard doesn’t block backend servers.”

The backend agreed. It passed through the gate easily, retrieved the data, and brought it back to the frontend.

The frontend now had what it needed — by going through a trusted backend proxy :))))))

Moral of the Story: CORS is a browser rule enforced by a security guard between frontend and backend. The browser checks if the API allows the origin. If not, the response is blocked — even if it's sent."