Why do I get Host is unreachable from React code but not from the browser?

Viewed 109

I have Laravel backend API at https://backend.mysite.local and there is a URL that returns list of items at https://backend.mysite.local/api/items

When I type in the browser https://backend.mysite.local/api/items I can see the JSON output on the browser.

But when I call it using Axios in my React code Nginx throws 502 Bad Gateway error with the following message:

connect() failed (113: Host is unreachable) while connecting to upstream, client: 172.20.0.1, server: www.mysite.local, request: "GET /api/items HTTP/1.1", upstream: "http://172.20.0.3:3000/api/items", host: "www.mysite.local"

I use a simple call with Axios:

  axios.get('https://backend.mysite.local/api/items').then(response => {
    console.log(response)
  })

I think the problem is with how I configured Docker and Nginx.

This is my docker-compose.yml:

networks:
    mysite:
        driver: bridge

services:
    nginx:
        image: nginx:stable-alpine
        container_name: nginx
        ports:
            - "8088:8088"
            - "80:80"  
            - "443:443"          
   
        networks:
            - mysite                

    php:        
        build:
            context: ./laravel
            dockerfile: Dockerfile
        container_name: php
        ports:
            - "9000:9000"
        networks:
            - mysite

    node:
        build:
            context: ./react
            dockerfile: Dockerfile
        container_name: react
        
        ports:
            - "3000:3000"       

        networks:
            - mysite


           

And this is my Nginx config file: (It's a little bit long but mostly redirections from http to https)

server {
    listen 443 ssl;
    server_name backend.mysite.local;
    ssl_certificate /etc/ssl/mysite.local.crt;
    ssl_certificate_key /etc/ssl/mysite.local.key;
    
    index index.php index.html;    
    error_log /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/html/public;
    
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }
    
    location ~ \.php$ {        
        try_files $uri = 404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass php:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;

        
        set $METHODS  'GET, POST, OPTIONS, HEAD';
        set $HEADERS  'Authorization, Origin, X-Requested-With, Content-Type, Accept';
        
   
}

server {
    listen 80;
    server_name backend.mysite.local;
    return 301 https://backend.mysite.local$request_uri;

}

server {
    listen 80;
    server_name nginx;
    return 301 https://backend.mysite.local$request_uri;

}



server {
    listen 80;
    server_name www.mysite.local;
    return 301 https://www.mysite.local$request_uri;
}

server {
    listen 80;
    server_name mysite.local;
    return 301 https://www.mysite.local$request_uri;
}

server {
    listen 80;
    server_name localhost;
    return 301 https://www.mysite.local$request_uri;      
}


server {
    listen 443 ssl;
    server_name mysite.local;
    ssl_certificate /etc/ssl/mysite.local.crt;
    ssl_certificate_key /etc/ssl/mysite.local.key;
    return 301 https://www.mysite.local$request_uri;
}


  server {   
    listen 443 ssl;
    server_name www.mysite.local;     
    ssl_certificate /etc/ssl/mysite.local.crt;
    ssl_certificate_key /etc/ssl/mysite.local.key;
    

     location / {      
     proxy_pass      http://node:3000;
      
    }
  }
1 Answers

Please make use of the container name to connect to your php container from react container, like: https://php:9000/api/items When connection through https://backend.mysite.local/api/items you are actuall connecting through host configuration of your local system. Alternatively, you could add: network_mode: host to all your container configs in the yml to make everything available on your local container.

Related