Question

Ubuntu 20.04 with .net core api and angular app connection refused

Posted December 18, 2020 1.3k views
NginxAPIAngularUbuntu 20.04

I have Ubuntu droplet and I was able to set up .net core api app on it to be run as a service. When I do curl -v http://localhost:5000/api/values I get proper ones. I do not need this api to be seen outside of the droplet nor do I need to access it from internet.
I was able to setup angular app which I can I access online.
Problem is that published angular app for some reason is not being able to connect to this .net core api service nor able to get api url at all. The only thing I can see in chrome is connection refused and that is all. I’ve checked access.log and error.log but they will not provide any kind of info since my guess I am not accessing from external network aka internet.
Does any one know what did I miss or what else needs to be setup in order for my angular app to be able to get to http://localhost:5000/api?
I can provide additional details for config of nginx but not sure how it can be relevant.

1 comment
  • Here is my config file for site that is being run. I do not have registered domain since I want to test my app for start.

    server {
           listen 80;
           listen [::]:80;
           root /var/www/bjrevotracking;
           index index.html index.htm;
    #       server_name appone.com www.appone.com;
    location / {
           try_files $uri $uri/ =404;
           }
    location /api {
           proxy_pass http://localhost:5000;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection keep-alive;
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
           proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
           proxy_set_header X-Forwarded-Proto $scheme;
           }
    error_log /var/www/bjrevotracking/error.log warn;
    }
    
    edited by MattIPv4

These answers are provided by our Community. If you find them useful, show some love by clicking the heart. If you run into issues leave a comment, or add your own answer to help others.

×
Submit an Answer
1 answer

Hi there @nosfaratus,

This sounds like a problem with Nginx, what I could suggest here is to check a few things first:

  • Make sure Nginx is up and running:
  • sudo systemctl status nginx
  • Make sure that there are no syntax errors in your Nginx config:
  • sudo nginx -t
  • Try specifying a server_name for your server block:
    server_name  _;
  • In case that you have a firewall, make sure that port 80 is open

Let me know how it goes!
Regards,
Bobby

  • @bobbyiliev Hi, here is from first cmd executed:

    nginx.service - A high performance web server and a reverse proxy server
         Loaded: loaded (/lib/systemd/system/nginx.service; enabled; vendor preset: enabled)
         Active: active (running) since Sat 2020-12-19 12:54:44 UTC; 21h ago
           Docs: man:nginx(8)
        Process: 86382 ExecStartPre=/usr/sbin/nginx -t -q -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
        Process: 86394 ExecStart=/usr/sbin/nginx -g daemon on; master_process on; (code=exited, status=0/SUCCESS)
       Main PID: 86395 (nginx)
          Tasks: 2 (limit: 1137)
         Memory: 3.6M
         CGroup: /system.slice/nginx.service
                 ├─86395 nginx: master process /usr/sbin/nginx -g daemon on; master_process on;
                 └─86396 nginx: worker process
    
    Dec 19 12:54:44 bjrevoapi systemd[1]: Starting A high performance web server and a reverse proxy server...
    Dec 19 12:54:44 bjrevoapi nginx[86382]: nginx: [warn] conflicting server name "" on 0.0.0.0:80, ignored
    Dec 19 12:54:44 bjrevoapi nginx[86382]: nginx: [warn] conflicting server name "" on [::]:80, ignored
    Dec 19 12:54:44 bjrevoapi nginx[86394]: nginx: [warn] conflicting server name "" on 0.0.0.0:80, ignored
    Dec 19 12:54:44 bjrevoapi nginx[86394]: nginx: [warn] conflicting server name "" on [::]:80, ignored
    Dec 19 12:54:44 bjrevoapi systemd[1]: Started A high performance web server and a reverse proxy server.
    

    Here are results from 2nd cmd executed:

    nginx: [warn] conflicting server name "" on 0.0.0.0:80, ignored
    nginx: [warn] conflicting server name "" on [::]:80, ignored
    nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
    nginx: configuration file /etc/nginx/nginx.conf test is successful
    

    AND OMG, dude y are a life saver!!!!!
    Last thing is that I added servername and it is working. I lost almost all nervers and 24h debugging this thing.
    I even tried this with server
    name but in one of the combinations.
    Thank you. THANK y so much.

    • @bobbyiliev But now I have a different problem, I am the only one that can access this public ip and login. From any other computer if I try I cannot login. Same error as before that angular app cannot connect to api - connection refused.

      I am not using any rules in firewall settings on the droplet. Not any rule has been defined. Nor I am using any firewall settings inside ubuntu.
      When I run

      sudo ufw status
      

      It says inactive.

      • Hi there,

        Are you still facing the issue? As long as Nginx is up and running it should be Ok as the reverse proxy config that you have looks good.

        The firewall should not be a problem as the connection to port 5000 is proxied on the server itself.

        What is the exact error that you get when you visit the site? Also what errors do you see in the web console of your browser?

        Regards,
        Bobby

        • @bobbyiliev Yes, still having an issue. I can access my site from any other machine that is not mine, problem is getting this error in chrome when other person tries to login:
          https://www.dropbox.com/s/h7w1tefj1x428w7/error.jpg?dl=0
          I do not see any error in error.log nor access.log on nginx

          • Hi there @nosfaratus,

            It looks like that the frontend is trying to connect to localhost rather than the IP of the server.

            Basically in your Angular application, you need to specify the API endpoint using the server IP address like this http://your_server_ip/api rather than 127.0.0.1:5000.

            It probably works only for you as you have the backend service running locally on your PC.

            Let me know how it goes!
            Regards,
            Bobby

        • Hi @bobbyiliev, what you wrote in last comment it doesn’t make sense. Angular app cannot find my local ip 127.0.0.1 because I do not have running service.

          As I wrote from start, .net core api is running as the service on ubuntu. If angular app is allowing me to login why not others?

          It is not possible to aim http://your_server_ip/api because I didn’t set api to be publicly visible. I can not even access it from outside.

          If I can do curl -v http://127.0.0.1:5000/api/values and it works on ubuntu how come that angular app cannot see this address?

          • One thing to add. It works now totally randomly. I can login from my PC without problems and sometimes it is giving me the same error. I haven’t changed anything. No idea what is happening.

            Here is my config:

            server {
                listen 80 default_server;
                listen [::]:80 default_server;
            
                root /var/www/site;
            
                index index.html index.htm;
            
                server_name _;
            
                location / {
                    try_files $uri $uri/ =404;
                }
            }
            
            

            I’ve used this cmd:

            sudo nano /etc/nginx/sites-enabled/default
            

            Then I used this cmd:

            sudo nano /etc/nginx/sites-available/api
            

            Added this content:

            server {
                listen        5000;
                server_name   _;
                location /api {
                    proxy_pass         http://localhost:5000;
                    proxy_http_version 1.1;
                    proxy_set_header   Upgrade $http_upgrade;
                    proxy_set_header   Connection keep-alive;
                    proxy_set_header   Host $host;
                    proxy_cache_bypass $http_upgrade;
                    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_set_header   X-Forwarded-Proto $scheme;
                }
            }
            

            And executed this:

            sudo ln -sf /etc/nginx/sites-available/api /etc/nginx/sites-enabled/
            
            

            I can still see login page but I cannot login.

            Finally, firefox showing me this:

            Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://127.0.0.1:5000/api/users/authenticate

          • Hi there,

            Actually, that is the main reason why you would use Nginx as a reverse proxy, you don’t open the port publicly but set up a reverse proxy so that if anyone hits /api Nginx would proxy the traffic to the backend service.

            Then once you have your reverse proxy setup, you would use that server_ip/api in your angular application and it will make the requests to that endpoint.

            If you have 127.0.0.1:5000 specified as your backend service, this would mean that the frontend service, whenever loaded on any client machine, would try to connect locally to 127.0.0.1:5000 on the client machine.

            Regards,
            Bobby

          • @bobbyiliev Yes, you are right. Now when I change /sites-available/default:

            server {
                listen        80;
                server_name   _;
                location / {
                    proxy_pass         http://localhost:5000;
                    proxy_http_version 1.1;
                    proxy_set_header   Upgrade $http_upgrade;
                    proxy_set_header   Connection keep-alive;
                    proxy_set_header   Host $host;
                    proxy_cache_bypass $http_upgrade;
                    proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
                    proxy_set_header   X-Forwarded-Proto $scheme;
                }
            }
            

            Create angular client:

            server {
                   listen 80;
                   listen [::]:80;
                   root /var/www/bjrevotracking;
                   index index.html index.htm;
                   server_name _;
            location / {
                   try_files $uri $uri/ =404;
                   }
            }
            

            I then add

            sudo ln -sf /etc/nginx/sites-available/bjrevotracking /etc/nginx/sites-enabled/
            

            In nginx.config I only added this line:

            include /etc/nginx/sites-available/default
            

            My angular app is working but api is not working. I get 404 not found. API works only until I add angular client.

            Any ideas?

          • Hi,

            You need to add a reverse proxy config for the /api endpoint and set it to the port that is your .NET application running on.

            Regards,
            Bobby

          • @bobbyiliev I tried that and /api/ but nothing works.