Api call to another container doesn't work in blazor wasm

Question

I have a project whose schema is like this :

When blazor webassembly published output, which exists in client_container(nginx alpine image), calls api, which is up in api_container, nothing happens.

And it couldn't receive any data.

The worse thing is that, blazor client_container doesn't provide me with any error.

Opening the page on my PC : http://localhost:8081/

The working result should be like this :

BUT it works like this :

The API call in razor component is this :

protected override async Task OnInitializedAsync()
{
    // in Debugging
    //people = await Http.GetFromJsonAsync<List<Person>>("http://localhost:8080/api/people");

    // in Publish in Docker
    people = await Http.GetFromJsonAsync<List<Person>>("http://api_container/api/people");
}

These are docker run commands :

docker run -p 8080:80 --rm --name api_container --network store_network parsalotfy/store_api
docker run -p 8081:80 --rm --name client_container --network store_network parsalotfy/store_client

To test if the api is accessible in client_container, I did such a test :

docker exec -it client_container sh

then in nginx client_countainer :

/usr/share/nginx/html # curl http://api_container/api/people

this is the result :

It is odd that api is accessible in client_container but the api call in razor component fails.

and this is client_container log :

You can take a look at all the code here in github in case you are interested

Sorry if it was too boring :)

Thank you.

Answer 1

With this in mind that you're using Blazor WASM which runs on client side just like JavaScript, I should note that all the requests including api calls (/api/people) are executed in the client browser & machine and they're browser can't resolve a host named api_container so unsurprisingly any request to your api and api_container will fail.