Monday, May 26, 2025 – Continuing from last week’s progress, I was assigned a new task: to hide the actual backend API URL from the client. Previously, the client exposed the API URL whenever a user made a request. Although our backend was already secured with proper authentication and authorization mechanisms, we wanted to add an additional layer of protection to prevent outsiders from even knowing the real API URL.
Initially, my first approach was to call the API from the server side, aiming to mask the actual URL. However, I quickly ran into a challenge, this approach would require rewriting each API call manually. Considering that there are potentially hundreds of endpoints, this method was not practical or scalable.
Eventually, I came across a more efficient solution: implementing a reverse proxy using Nginx. The idea behind a reverse proxy is that all client requests are routed through the Next.js server, which in turn forwards them to the backend API. This setup effectively hides the real backend URL, as the client only sees the requests going to the Next.js frontend. In addition, it allows for better control over request handling, logging, and access restrictions.
However, during a code review session with Mr. Peter, we discovered a flaw in my implementation. While the reverse proxy did manage to change the port and redirect the requests, it didn’t completely fulfill the goal. The real backend endpoint was still accessible, meaning it wasn’t truly hidden from external users. Our actual objective was to ensure that the backend communicates only with the Next.js frontend, preventing any direct access from outsiders. Unfortunately, my current setup didn’t enforce that restriction.