Nginx reverse proxy to node.js not working

Question

I have an angular and node app with Postgres as the db. I am deploying them to docker containers on ec2 instance. The Nginx reverse proxy on ec2 is not routing requests to node. The same setup works on my local machine. The error message I receive is: " XMLHttpRequest cannot load http://localhost:3000/api/user/login due to access control checks ". Here is my docker-compose file:

version: '3.3'

networks:
  network1:

services:
  api-service:
    image: backend
    environment:
      PORT: 3000 
    volumes:
      - ./volumes/logs:/app/logs
    ports:
      - 3000:3000
    restart: always
    networks:
      - network1

  nginx:
    image: frontend
    environment:
      USE_SSL: "false"
    volumes:
      - ./volumes/logs/nginx:/var/log/nginx/
      - ./volumes/ssl/nginx:/etc/ssl/
    ports:
      - 80:80
      - 443:443
    restart: always
    networks:
      - network1

and my Nginx.conf is as follows:

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    server {
        listen       80;
    

        location / {
            root /myapp/app;
            try_files $uri $uri/ /index.html;


            proxy_set_header Upgrade    $http_upgrade;
            proxy_set_header Connection $http_connection;
            proxy_set_header Host       $host;
        }

        location /api/ {
            proxy_pass http://api-service:3000;
        }
    }
}

and my api url for backend is : (the commented lines are all what I have tried)

export const environment = {
  production: false,
   //apiUrl: 'http://api-service'
  // apiUrl: '/api-service/api'
  // apiUrl : 'http://' + window.location.hostname + ':3000'
  //apiUrl: 'http://localhost:3000/api'
  apiUrl: 'http://localhost:3000'
};

and in my angular service I am using:
const BACKEND_URL = environment.apiUrl + "/api/user/";

and in my backend app.js:

app.use("/api/user/", userRoutes);

What am I doing wrong?

Answer 1

Posting what worked for me in case it helps someone. Here is what worked when I moved my code to ec2 instance:

export const environment = { production: false, //apiUrl: 'http://localhost:3000/api' apiUrl: '/api' };

So, in localhost apiUrl: 'http://localhost:3000/api works but it does not work on server.