CODEWITHSUNDEEP
nginxreverse-proxy
Ettur
Ettur

Reputation: 799

NGINX Reverse Proxy between SPA and API - issue with API routes returning 404

I have the following setup:

NextJs SPA running on localhost:3000

AspNetCore API running on localhost:55379

I then added NGINX reverse proxy between them to get rid of CORS issues, nginx.conf has following setup

server {
        listen       80;
        server_name  localhost;

        location / {
            proxy_pass http://localhost:3000;
        }

        location ^~ /api/ {
            proxy_pass http://localhost:55379;
        }   
    }

Result is that NextJs app is being served correctly from http://localhost, However, API calls return 404

For example a login route is being called from SPA with following URL

http://localhost/api/user/Login

which should proxy to

http://localhost:55379/api/user/Login

but this never reaches API and request returns 404. What am I missing in this setup here?

Upvotes: 0

Views: 349

Answers (1)

Ettur
Ettur

Reputation: 799

I played around with some settings and examples and managed to get it working!

Here are my server settings in nginx.conf for reference

server {
    listen       80;
    server_name  localhost;

    location / {
        proxy_pass http://localhost:3000;
    }

    location /api/ {
        proxy_pass http://localhost:55379;
        proxy_set_header   Host $host;
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header   X-Forwarded-Host $server_name;
        proxy_set_header   X-Forwarded-Proto $scheme;
    }
    
    access_log /Proxy/nginx-1.25.3/logs/access.log  main;

    error_log /Proxy/nginx-1.25.3/logs/error.log debug;
}

Upvotes: 0

Related Questions