You split the project in two: Laravel serves an API on localhost:8000 , and a React or Vue app runs on localhost:5173 . The first request from the browser fails, and the console shows a message along these lines (Chrome's wording):

Access to fetch at 'http://localhost:8000/api/users' from origin 'http://localhost:5173' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Enter fullscreen mode

Exit fullscreen mode

The API itself is usually fine. CORS is a browser rule: the browser asks the server whether a page from another origin may read its response, and the server answers with headers. Laravel already has the machinery for that answer. Most fixes are a few lines of config, and I checked each one against the real middleware.

Why you only see it in the browser

Two URLs have the same origin only if scheme, host and port all match. localhost:5173 and localhost:8000 differ in the port, so every request between them is cross-origin.…