React app in Docker fetch can't find a server

Question

I've got a React app build with Create-React-App running inside a docker container setup via docker-compose.

This code:

    const req = new Request(
        apiAdminUrl + '/login', {
        method: 'POST',
        body: formData
    }
    return fetch(req).then(processResp, processErr);

Returns TypeError: Load failed, "Failed to load resource: A server with the specified hostname could not be found."

But the curl request from the same container works without issues:

curl -d "[email protected]" -d "pwd=xxx" -X POST http://api-admin:3000/v1/login

CORS is enabled in the api code. apiAdminUrl is properly set as http://api-admin:3000/v1.

What am I missing?

Answer 1

When you run the curl command inside the docker container, it can see other connected docker containers, and see itself, etc.

But when you run the app, the react code runs from your browser, that's from your own machine not from the docker container. So, it does not see the docker host names.

The common way to solve this is to either expose the other container as localhost etc. and/or to follow the proxy setup steps in the docs here:
https://create-react-app.dev/docs/proxying-api-requests-in-development/