Nginx 502 Bad Gateway error when call api

Question

I have a Angular build and an Django backend providing API's running on one server. I've configured them in nginx with the frontend having a proxy to the backend server.

The backend is running on the url 127.0.0.1:8000/api and the frontend is running on localhost

Config:

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    server {
        listen 80;
        charset utf-8;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_types text/css text/javascript application/x-javascript application/json;

        location /api {
            proxy_pass http://127.0.0.1:8000/api;
        }

        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

Now when I do any api call from the frontend I get the a 502 Bad Gateway error

GET http://localhost/api/posts/post/management 502 (Bad Gateway)

Noah Lc Noah Lc · Accepted Answer · 2019-04-28T16:04:06

I have changer config to

upstream backend {
      server backend:8000;
    }

    server {
        listen 80;
        charset utf-8;
        server_name  localhost;

        root   /usr/share/nginx/html;
        index  index.html index.htm;
        include /etc/nginx/mime.types;

        gzip on;
        gzip_types text/css text/javascript application/x-javascript application/json;

        # backend urls
        location ~ ^/(admin|api|media) {
            proxy_redirect off;
            proxy_pass http://backend;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host $http_host;
        }

        # static files
        location /static {
            proxy_pass http://backend;
        }

        # frontend
        location / {
            try_files $uri $uri/ /index.html;
        }

and it's work fine

Nginx 502 Bad Gateway error when call api

1 Answers