1. Directly request the backend API in Postman, response is 401. As expected. See Figure 1
2. Directly request the frontend API in Postman, response is 504 Gateway Time-out. Not as expected. See Figure 2
<html>
<head>
<title>504 Gateway Time-out</title>
</head>
<body>
<center>
<h1>504 Gateway Time-out</h1>
</center>
<hr>
<center>nginx</center>
</body>
</html>3. The frontend configuration file in Nginx is as follows
server {
listen 80;
listen 443 ssl;
server_name xxx-frontend.com;
root E:/wwwroot/xxx-frontend/dist/apps/admin;
access_log logs/frontend.access.log;
error_log logs/frontend.error.log;
# add_header X-Frame-Options "SAMEORIGIN";
# add_header X-Content-Type-Options "nosniff";
# client_max_body_size 1024M;
ssl_certificate vhosts/xxx-frontend.com.pem;
ssl_certificate_key vhosts/xxx-frontend.com-key.pem;
index index.html;
charset utf-8;
location /api {
proxy_pass https://xxx-backend.com/api;
}
location = /favicon.ico { access_log off; log_not_found off; }
location = /robots.txt { access_log off; log_not_found off; }
location ~ /\.(?!well-known).* {
deny all;
}
}
4. Check the backend API request logs and confirm that no new request logs are added when requesting the frontend, indicating that the request did not reach the backend. Check the frontend request error logs, details are as follows. See Figure 3
2024/01/03 11:45:21 [error] 21024#23748: *1121 upstream timed out (10060: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond) while reading response header from upstream, client: 127.0.0.1, server: xxx-frontend.com, request: "POST /api/me HTTP/1.1", upstream: "https://120.79.70.168:443/api/me", host: "xxx-frontend.com"
5. Directly POST request https://120.79.70.168:443/api/me and confirm there is no response. Click Disable SSL Verification. See Figure 4
6. The suspected reason is that the proxied URL itself is an intranet penetration URL based on FRP. Decide to directly proxy to the backend URL of the local environment 127.0.0.1, bypassing FRP. Edit the hosts file
127.0.0.1 xxx-frontend.com
127.0.0.1 xxx-backend.com
7. Directly request the frontend API again in Postman, response is 401, consistent with the response from directly requesting the backend API. As expected. See Figure 5
8. However, after doing this, Chrome browser prompts that the site is not secure. Finally, I had to revert the changes to the hosts file.
9. Edit the frontend Nginx configuration. The backend Nginx configuration needs to listen on port 8000.
location /api {
proxy_pass http://localhost:8000/api;
}
10. Directly request the frontend API again in Postman, response is 401, consistent with the response from directly requesting the backend API. Moreover, the frontend page can also be opened normally in the browser. See Figure 6
