[FIXED] How to reverse proxy so that a request to any-addr/api/... goes to other-addr/...?

Issue

I am sure this is some misunderstanding on my part, but I can't get the reverse proxy to work the way I want it to.

I currently have a setup as follows:

1. Web server by Nginx
2. Backend by FastAPI
3. Frontend by ReactJS

The frontend is set to make calls to backend, but for convenience, now when I want to setup an Nginx server so that whenever Frontend makes call to /api/, it will route to the backend WITHOUT the /api/ in the URL, such as:

• Frontend calls 0.0.0.0/api/auth/login
• Backend 0.0.0.0/auth/login gets called

This is my current /etc/nginx/conf.d/default.conf:

EDITED:

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

    index index.html;
    server_name 192.168.1.12;

    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_pass_request_headers on;

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

    location /assets/ {
    root /opt/ChiSo/frontend/src/assets/;
    }
    
    location ~ /assets/*$ {
    root /opt/ChiSo/frontend/src/assets;
    }
}

server {
    listen 8001;
    listen [::]:8001;

    server_name backend.api
    add_header 'Access-Control-Allow-Origin' 'http://backend.api';
    add_header 'Access-Control-Allow-Credentials' 'true';
    add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
    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_pass_request_headers on;

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

    location ~ /api/(auth|account|gcis|judicial|news)/ {
    proxy_pass http://192.168.1.12:8000/$1;
    }
}

Even if I know that I got some things right as I do receive A response on backend:

"OPTIONS /api/auth/login HTTP/1.1" 400 Bad Request

I do also know that it's not the results I want. I would love to get rid of that extra /api/ in the URL. (Solved?)

Right now, these messages show up in the browser when trying to login through the frontend project:

How do I edit my config to achieve this?

Solution

I found a workaround that might help other beginners with similar issues:

In my web.conf, I simply make sure the frontend calls localhost/api/... and create a reverse proxy for any /api/... call towards the backend application which in my case is FastAPI (Python 3). Thus, my web.conf file now looks like this:

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

    index index.html;
    server_name 192.168.1.12;

    add_header 'Access-Control-Allow-Origin' "$http_origin" always;
    add_header 'Access-Control-Allow-Credentials' 'true' always;
    # required to be able to read Authorization header in frontend
    add_header 'Access-Control-Expose-Headers' 'Authorization' always;

    add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range' always;
    add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH' always;
    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_pass_request_headers on;

    location  /favicon.ico {
        root /opt/ChiSo/frontend/static/favicon.ico;
    }

    location / {
    root /opt/ChiSo/frontend/static;
    index index.html;
    }

    location ~ /api/(alternative|routes|to|backend|application)/(.*) {
        proxy_pass http://192.168.1.12:8000/$1/$2;
    }
}

If there are better solutions to my initial problem, you're more than welcome to inform me :)

Answered By - W1ck3d

Answer Checked By - Candace Johnson (PHPFixing Volunteer)