Nginx Angular App can’t access REST API on localhost in production

nginxnode.js

I've searched around quite a bit and still haven't found a solution that works for my issue…

We have a NodeJS application that is an Express app exposing a REST API on localhost:3000. We also have an AngularJS application that is built (ng build –prod) and then served by Nginx. On a local machine, everything works fine. When I put it in to production, the Angular app can't access any of the API endpoints.

XHR Headers Information

Developer Console Output

Initially, I thought this could be a CORS problem, so I adjusted my Nginx configuration to be as follows:

server {
        listen 80 default_server;
        listen [::]:80 default_server;


        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
        }
}

That didn't solve the problem. There is no information in any of the Nginx logs, and I can successfully access the REST API via curl when logged in to the server. I'm stuck. Any help is appreciated.

Best Answer

As it turns out, Angular can't resolve localhost, but using 127.0.0.1 works just fine.