CORS Blocked Request Error Block for React

It sends nothing: the origins end in .test, the headers and the console line are typed in the file, and the page only describes a failure. The copy buttons are real: each one writes its snippet (or the console line) to the clipboard, and says Copied or Couldn't copy through its own polite status. Swap the hosts and snippets for yours in PAGE, API, HEADERS, CONSOLE and FIXES.

Because a page may only read a reply from another origin when that server says so, with an Access-Control-Allow-Origin header naming the page's origin. The request went out and the server answered, but without the header, so the browser blocks the page from seeing the response. It is a rule of the browser, not of the server, which is why a command-line request to the same address works.

Adding the header on the API is the real fix when you own it: name the exact origin, and avoid a star on endpoints that use cookies or tokens. A server-side proxy suits APIs you don't control, because your server calls them and the browser only sees your origin. A dev-server proxy is only for building locally; it does nothing in production. You cannot turn CORS off in the browser for your visitors.

It is a dashed row with a cross and the words Not sent, while the headers that arrived are solid rows with values. The console line has a heavy edge at its start and a Blocked label above it. The only status color is the cross.

Tab reaches Read the CORS guide, the console's copy button and each fix's copy button, in that order, each named for what it copies. The headers are a real table with a caption and row headers, the drawing's two origins are decorative (the console line below names both of them in text), and the code is plain text that you can select.

The headline and the guide button come first, then the drawing and the headers, then the console line cut to two lines (the copy button still copies the whole line), then the three fixes stacked, each with its snippet. The explanations under each fix's name stay for screen readers and are hidden from sight, and nothing scrolls sideways down to 320 px.