javascript client can't in docker-compose service can't fetch from node.js api-CodePudding

I have a docker-compose.yml (test setup) file that contains 3 services: a nodes api (api), a html php frontend (clientphp) and a html/javascript frontend which should replace the php frontend but I can't get it working (clientjs).

a Node.js api that returns a JSON object called api

{
  "products": [
    "icecream",
    "milk",
    "fries",
    "cheese",
    "oranges",
    "bananas"
  ]
}

a html page with php code fetching the json from http://api:3000/ and creating an ul called clientphp. Works fine!

<html> 
    <head>
        <title>My Shop</title> 
    </head> <body>
    <h1>Welcome to my shop</h1> 
    <ul>
        <?php
        $json = file_get_contents('http://api:3000/'); 
        $obj = json_decode($json);
        $products = $obj->products;
        foreach ($products as $product) { 
            echo "<li>$product</li>";
        }
        ?> 
</ul>  </body> </html>

a javascript client trying to fetch the code from the api which won't work at all. It can't find http://api:3000/. If I replace the service name with the IP address of the container I just a random error about an unhandled promise rejection. This service is called clientjs

  fetch('http://api:3000/', { mode: 'no-cors'})        //this won't work, replacing the api in the url with the IP address will the server not found error. 
  .then(res => console.log(res))
  .then(response => response.json())
  .then(data => {
    console.table(data);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

[Log] TypeError: Load failed (index.js, line 30)
[Error] Unhandled Promise Rejection: Not implemented on this platform
    (anonymous function)
    rejectPromise
    reject
    (anonymous function) (content-script.js:80:377615)
    n (content-script.js:80:115)
    (anonymous function) (content-script.js:80:906)
    Global Code (content-script.js:80:915)
[Error] Failed to load resource: A server with the specified hostname could not be found. (api, line 0)
[Log] TypeError: Load failed (index.js, line 30)

The Dockerfile:

FROM node
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install -y
COPY index.js ./ 
EXPOSE 3000
CMD node index.js

The docker-compose.yml file:

version: '3'
services:
  api:
    build: .
    volumes:
      - .:/home/node/app
    ports:
      - 5001:3000
  client:
    image: nginx
    volumes:
      - ./clientjs:/usr/share/nginx/html/
    ports:
      - 5002:80
    depends_on:
      - api
  php-client:
    image: php:apache
    volumes:
      - ./clientphp:/var/www/html
    ports: 
      - 5003:80
    depends_on:
      - api

CodePudding user response：

The PHP is running on the client docker instance. Requests from it come from that client to api inside the virtual network created by the Docker Compose configuration.

The JavaScript is served from the client docker instance to the browser (which isn't running in the virtual network) and the JavaScript is executed in the browser.

The browser can't find http://api:3000 because it isn't part of that virtual network.

The API ports configuration is 5001:3000 so, if I remember my Docker correctly, you need to be making the request to http://localhost:5001/