Frontend can't connect to backend in Docker setup

Frontend
1

I’m having trouble with my Docker setup. My frontend Angular app can’t reach the backend services. Here’s what’s going on:

I’ve got containers for my frontend, backend (resource server), auth service, gateway, and two databases. They’re all running and can ping each other.

But when I open the frontend in my browser, I see network errors in the console. It looks like the requests to the backend are failing.

The weird part is, if I run curl http://gateway:8081/menu/lunches from inside the frontend container, it works fine. I get the correct response.

I’m using container names as URLs in my Spring Boot gateway app, and that seems to be working okay.

Anyone know what might be causing this? Is there something I’m missing in my Docker network setup or Angular configuration?

version: '3'
services:
  web_app:
    build: ./client
    ports:
      - '3000:3000'
  api:
    build: ./server
    ports:
      - '5000:5000'
  db:
    image: mongo:latest
    ports:
      - '27017:27017'

This is a simplified version of my docker-compose file. The actual one is more complex with additional services.

2

hmm, have you checked your angular environment files? sometimes they’ve got hardcoded urls that mess things up. also, maybe try using nginx as a reverse proxy? it could help smooth out the communication between your frontend and backend. what do you think about that approach?

3

hey man, sounds like a classic CORS issue. browsers are picky bout security. try adding cors config to ur backend, allowing requests from localhost:3000. also, make sure ur angular app is using localhost instead of container names for api calls. that should fix it up

4

It seems like you’re encountering a common issue with Docker networking and browser security. While your containers can communicate internally using their service names, your browser can’t resolve these names. Instead, try using ‘localhost’ in your Angular app’s configuration.

For example, if your gateway is exposed on port 8081, set your API base URL to ‘http://localhost:8081’ in the Angular environment files. This way, the browser will send requests to localhost, which Docker will then route to the appropriate container.

Also, ensure CORS is properly configured on your backend to allow requests from the frontend’s origin. You might need to add ‘http://localhost:3000’ to your allowed origins list.

Lastly, double-check that your Angular app is actually being served from the correct port (3000 in this case) and that it’s accessible from your host machine’s browser.