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:
- Web server by Nginx
- Backend by FastAPI
- 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)
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.