How to connect a frontend to a backend — step by step, with plain fetch

You've got a nice page in the browser (the frontend) and a server that knows something — a product list, a profile, the weather (the backend). Between them is a gap, and it's the classic beginner wall: "how do I make them talk?" Good news — the bridge takes a single request. Let's do it on a live example, in five steps.

What we're connecting

Quick, so we don't get tangled: the frontend is what's in the browser (buttons, text). The backend is a program on a server that serves data. They talk through an API: the backend has an address (an endpoint) the frontend asks, and the backend answers. The answer usually comes as JSON. Our job is to make that one request from the frontend to the backend and show the answer.

Step 1. Get the backend running and find its address

First, the backend has to be running and listening for requests. Start it — the console will show something like listening on http://localhost:4000. That means it has an endpoint, say http://localhost:4000/api/hello, that serves data. Write down that address — the frontend needs it.

Step 2. Test the endpoint before touching the frontend

Don't write the frontend blind. Open the endpoint's address right in the browser (for simple read requests this works) or hit it from the terminal:

curl http://localhost:4000/api/hello

If you get JSON back like {"message":"hi"} — the backend is alive and the address is right. Half of "the frontend can't see the backend" complaints are cured right here: it turns out the address is wrong or the server isn't running at all.

Step 3. From the frontend, make the request with fetch

Now from the browser's side. fetch is the built-in command for "go to this address and bring back the answer":

const res = await fetch("http://localhost:4000/api/hello"); const data = await res.json(); console.log(data);

The first line goes to the backend, the second parses the JSON answer into an object, the third prints it to the console. Open the browser console (F12) — if your object is there, the link works.

Step 4. Show the data on the page

Data in hand — now put it in front of the user. Instead of console.log, drop the value into a page element:

document.querySelector("#out").textContent = data.message;

That's it: the frontend asked, the backend answered, the user saw it. That's "connected."

Step 5. You'll probably hit CORS — and that's normal

At step 3 the console often throws red text about CORS policy. Don't panic: it's not a bug in your code, it's a browser safeguard — it won't let a frontend on one address reach a backend on another until the backend explicitly allows it. The fix is on the backend side — add a permitting header. Full walkthrough — how to fix a CORS error.

What you get

A working chain: a page in the browser calls your server and shows its answer live. This is the foundation of almost any app — a feed, a profile, a cart all work the same way, just with more endpoints. From here, swap GET for POST to not only read data from the server but send it back — for example, saving a form.

Do I have to use fetch — or do I need a library like axios?

No. fetch is built into the browser, and it's enough to start — no install. Libraries like axios add conveniences (shorter code, auto JSON parsing, error handling), but they're an add-on. Start with fetch, move over later if it starts to hurt.

Why does the request work from curl but not from the browser?

Almost always it's CORS (step 5): curl and the browser treat the safeguard differently. If curl serves the data but fetch gives red text in the console, the issue isn't the backend "in general," it's the permission specifically for the browser. Fix the headers on the backend and the frontend request will come to life.