I’m working on a learning project that uses the following stack:
- Frontend: React (hosted via NGINX 1.26.2 )
- Backend: Node.js with Express, PostgreSQL database
- Reverse Proxy: NGINX
My goal is to proxy API requests from the frontend through NGINX to my Node.js backend. Specifically, I’m submitting a contact form using a POST request i created.
Part of my frontend code which handles this on sumbit is this:
try {
const response = await fetch('http://localhost:5000/api/contact', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(formData),
});
I’m using NGINX to serve my static files and proxy API requests to the Node.js backend, which runs on port 5000. Here’s my nginx.conf:
server {
listen 80;
server_name localhost;
# Serve static files for the React frontend
location / {
root C:/Users/witte/Documents/Projects/effectief.tech/frontend/build;
index index.html index.htm;
try_files $uri /index.html;
}
# Proxy API requests to Node.js
location /api/ {
proxy_pass http://localhost:5000; # Proxy to backend
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-Proto $scheme;
}
error_log logs/error.log debug;
}
Backend Setup:
In my server.js backend, I’m handling the /contact route like this:
app.post('/api/contact', async (req, res) => {
Issue:
When I submit the form, the API call gets registered in my backend and the data enters my database. However, I can’t find the post request in my access log of nginx.
All frontend related calls that use GET to retrieve images or other css do register in the access.log and my frontend is reachable via localhost after i build it so the “location /” part of my nginx.conf works.
So it seems that nginx is not correctly proxying requests to my backend based on the “location /api/” part of the config.
What am I missing to make this work?