I'm using different Docker containers for API and front-end.

frontend:
  image: <my_frontend_image>
  ports:
   - "3000:3000"

api:
  restart: always
  build: ./<my_api_folder>
  ports:
   - "9002:9002"

On API side I have the endpoint for sending emails:

/emails/custom

On frontend side I'm trying to send a request to this endpoint:

$.ajax({
  url: "http://api:9002/api/emails/custom",
  dataType: "json",
  type: "POST"
  ...

But it doesn't work. It looks like it sends a request to FrontEnd container again.

What is wrong here?

UPDATE: Maybe this issue is somehow related to my nginx configurations too:

location / {
    # Define the location of the proxy server to send the request to
    # Web it's a name of docker container with frontend.
    proxy_pass http://frontend:3000;

    # Redefine the header fields that NGINX sends to the upstream server
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # Define the maximum file size on file uploads
    client_max_body_size 5M;
}

# Setup munication with API container.
location /api {
    rewrite "^/api/(.*)$" /$1 break;
    proxy_pass http://api:9002;
    proxy_redirect     off;
    proxy_set_header   Host $host;
}

I'm using different Docker containers for API and front-end.

frontend:
  image: <my_frontend_image>
  ports:
   - "3000:3000"

api:
  restart: always
  build: ./<my_api_folder>
  ports:
   - "9002:9002"

On API side I have the endpoint for sending emails:

/emails/custom

On frontend side I'm trying to send a request to this endpoint:

$.ajax({
  url: "http://api:9002/api/emails/custom",
  dataType: "json",
  type: "POST"
  ...

But it doesn't work. It looks like it sends a request to FrontEnd container again.

What is wrong here?

UPDATE: Maybe this issue is somehow related to my nginx configurations too:

location / {
    # Define the location of the proxy server to send the request to
    # Web it's a name of docker container with frontend.
    proxy_pass http://frontend:3000;

    # Redefine the header fields that NGINX sends to the upstream server
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

    # Define the maximum file size on file uploads
    client_max_body_size 5M;
}

# Setup munication with API container.
location /api {
    rewrite "^/api/(.*)$" /$1 break;
    proxy_pass http://api:9002;
    proxy_redirect     off;
    proxy_set_header   Host $host;
}

• javascript
• docker

• 1 try giving "container_name: api" to the api service – Kishu Agarwal Commented Mar 10, 2018 at 20:53
• @KishuAgarwal, do you mean to add container_name: api for API service in docker-pose file? – smart Commented Mar 10, 2018 at 20:56
• yes, maybe the problem is the container name – Kishu Agarwal Commented Mar 10, 2018 at 21:00
• @KishuAgarwal Docker Compose creates DNS entries for the base service name. It will resolve all containers running for that service (if they are scaled you will get multiple results) – Matt Commented Mar 10, 2018 at 21:11

4 Answers 4

You are trying to access the api service externally from the browser not from within the frontend container which is where the api hostname is accessible. Port forwarding is done by docker so externally you need to hit the host. Eg.: http://localhost:9002 (if your using docker for mac for example)

A similar question/answer can be found here

I have look into your problem more carefully. You can't do what you tryint to do, because browser really always use local env to make ajax requests, and in that env "api" dose not exist, it look at its own hosts file and can't find it, and finally fail.

You need to update your frontend code to makes requrest based on where it is.

  var url = document.location.protocol + "//" + document.location.hostname + ":9002";
  var api = url + "/api/emails/custom"
  $.ajax({
    url: api,
    dataType: "json",
    type: "get",
  });
}

You can also correctly resolve "api" to ip address in your local hosts file, but I think this is more sensible solution. I also made working version here:

NOTE: I made change from POST to GET request.

Well, the problem was with a final / in JS URL. It's fixed just by replacing:

url: "http://api:9002/api/emails/custom",

with

url: "http://api:9002/api/emails/custom/",

Another thing that might be improved - hostname, as @Marko mentioned.

var url = document.location.protocol + "//" + document.location.hostname + ":9002"; This works for me as well. But I am curious to know if we can make it work with container name.