Get Request with Axios to Express return HTML instead of JSON - Suspecting an issue with NGINX reverse proxy set up - nginx-reverse-proxy

I am having an issue when I GET request data from my react.js app to my Express.js backend, I am getting HTML garbage back instead of what my backend is supposed to return. Upon debugging and researching, I found out that the reason for that is because my GET route "/order/getTimeSlots" actually returns HTML content that is displayed when I go to mywebsite.com/order/getTimeSlots instead of my backend. I have set up proxy in my development environment and it works, however, it does not work in production. I am using nginx to serve my react app and here is my nginx config
server {
listen 80 default_server;
listen [::]:80 default_server;
root /var/www/mywebsite.com;
index index.html index.htm index.nginx-debian.html;
server_name mywebsite.com www.mywebsite.com;
location / {
# First attempt to serve request as file, then
# as directory, then fall back to displaying a 404.
# try_files $uri $uri/ =404;
try_files $uri /index.html;
}
location /ordersubmit {
proxy_pass http://localhost:8080; #this is where my backend app is running on
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location /order/getTimeSlots {
proxy_pass https://localhost:8080; #this is where my backend app is running on
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
}
When trying curl on localhost:8080/getTimeSlots from my server console, I am getting the correct response.
I know there is a problem with my reverse proxy set up, but I cannot figure out what the issue is, so I was wondering if someone here can help
Thank you everyone

Fixed the issue myself, I realized that I was adding those locations under the server that listens to port 80, but since I am using https, I was supposed to use port 443

Related

Hosting Blazor Standalone WASM on NGINX

I'm having some issues hosting blazor WASM standalone (without an asp.net core project as host) behind nginx as a reverse proxy.
Here is my Nginx default config file:
server {
listen 80;
listen [::]:80;
server_name localhost;
location / {
root /var/www/web/BlazorApp/wwwroot;
try_files $uri $uri/ index.html =404;
include /etc/nginx/mime.types;
types {
application/wasm wasm;
}
default_type application/octet-stream;
}
location /service1/ {
proxy_pass http://localhost:5001/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /service2/ {
proxy_pass http://localhost:5002/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
location /service3/ {
proxy_pass http://localhost:5003/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection keep-alive;
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
This Configuration works in the sense that I can access my blazor app using
http://{server-ip-address}
and my other services using
http://{server-ip-address}/serviceX
where X would refer to service 1,2 and 3 respectively
First issue: when I navigate in my blazor app for example to http://{server-ip-address}/My-Blazor-Page and I refresh the page I get a 404 not found error.
for it to work back again I need to go back to the base address http://{server-ip-address} and navigate back to My-Blazor-Page.
I cannot refresh a page and go back to the same page.
Second issue: I would like my blazor app to have a different location. I would like to use http://{server-ip-address}/Blazor rather than http://{server-ip-address}/.
I tried everything to get it right but this is the only config that semi-works
Many thanks for your help!
The following nginx.conf file is simplified to show how to configure Nginx to send the index.html file whenever it can't find a corresponding file on disk.
When setting the NGINX burst rate limit with limit_req, Blazor WebAssembly apps may require a large burst parameter value to accommodate the relatively large number of requests made by an app. Initially, set the value to at least 60:
Increase the value if browser developer tools or a network traffic tool indicates that requests are receiving a 503 - Service Unavailable status code.
For more information on production Nginx web server configuration, see Creating NGINX Plus and NGINX Configuration Files.
The above will try the URL, and if no file matches, it'll serve index.html instead. This is the way.
For your second issue, you should set the base attribute value to "Blazor" and put all files in the Blazor directory (the config needs to match this). You can also route differently, but this is the easiest.

Nginx config for location/api

Placed frontend and backend in nginx. I'm trying to correctly configure that after authorization, nginx redirected me to the original page.
Nginx Conf:
##Frontend
server_name atlas.com;
location / {
root /ops/front_2.0/dist/;
index index.html;
}
##Backend
location /api {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto https;
With this configuration, the backend does not work, I will not get to the authorization page and a 404 Not Found error occurs.
But if, with the same settings, you place the Backend on another domain name, for example:
server_name server.atlas.com;
location / {
proxy_pass http://localhost:8080;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-Proto https;
}
Then everything works fine. But such a solution does not suit me, since it is not convenient to use for Frontend, since a CORS error is raised.

Configuration for passing NGINX request to Express?

I'm creating a website with NGINX handling Static content, SSL and all that stuff, while my API and non-static websites are handled by Express.
Now, I'd like NGINX to pass stuff like "/update" to Express. However, I'm not sure how to configure that.
Is the example below from DigitalOcean functional for https websites in the first place? Shouldn't I configure the same SSL certificate that NGINX uses to Express, so it redirect to https://website.com/update instead of http://website.com/update?
location / {
proxy_pass http://localhost:8080;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
Thanks in advance!
To proxy pass any API request starting with /update Example: http://localhost:3000/update, http://localhost:3000/update/test etc.. You can use below nginx config inside server block:
location /update {
proxy_pass http://localhost:3000;
}
If you want to redirect http://website.com/update to https://website.com/update . You will need to create a server at 80 port which will redirect any request that come at 80 port will be redirect to https://website.com/update
server {
listen 80;
listen [::]:80;
server_name website.com;
return 301 https://website.com$request_uri;
}

NGINX ignore bad certificate and configuration and just run?

We have an app that uploads automatically generated SSL certificate to our NGINX load balancers. One time the we had this issue that a "bad certificate" got uploaded and then a automated nginx reload is thereafter executed, our server went offline for a while causing DNS issues (DNS not found) for our server domain. Causing a huge downtime to our clients.
However it is a feature / function in our application to allow apps to upload SSL cerficate and our backend server installs it automatically, is there a way to tell to ignore bad NGINX conf files and crt/key's altogether? Looking at the before logs I can remember that I saw something like SSL handshake error before the incident.
Here's how our main nginx-jelastic.conf looks like:
######## HTTP SECTION PROTOTYPE ########
http {
server_tokens off ;
### other settings hidden for simplicity
include /etc/nginx/conf.d/*.conf;
}
######## TCP SECTION PROTOTYPE ########
So what I am thinking if it's possible for nginx to just ignore all bad NGINX conf files that is located there. Here's a sample of what gets uploaded in the conf.d folder:
#
www.example-domain.com HTTPS server configuration
#
server {
listen 443 ssl;
server_name www.example-domain.com;
ssl_certificate /var/lib/nginx/ssl/www.example-domain.com.crt;
ssl_certificate_key /var/lib/nginx/ssl/www.example-domain.com.key;
access_log /var/log/nginx/localhost.access_log main;
error_log /var/log/nginx/localhost.error_log info;
proxy_temp_path /var/nginx/tmp/;
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
location / {
set $upstream_name common;
include conf.d/ssl.upstreams.inc;
proxy_pass http://$upstream_name;
proxy_next_upstream error;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Host $http_host;
proxy_set_header X-Forwarded-For $http_x_forwarded_for;
proxy_set_header X-URI $uri;
proxy_set_header X-ARGS $args;
proxy_set_header Refer $http_refer;
proxy_set_header X-Forwarded-Proto $scheme;
}
}
For some reason the certificate and key indicated in the configuration could be wrong, that that is going to wreck the nginx server and since our domain is pointed to this server via A record, it us a total disaster if the nginx fails as DNS issues happens and it could take 24-48 hours for DNS to get back.

ExpressJS + serve-favicon + nginx

I'm having problems serving favicons with nginx as a reverse proxy in front of my express app.
Tried to search for answers but couldn't find any. My configuration file is as shown:
server {
listen 80;
server_name vogueverve.com;
location / {
proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_cache_bypass $http_upgrade;
}
location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|zip|tgz|gz|rar|bz2|pdf|txt|tar|w$
root /var/www/hashiontag/public;
}
}
Please help! Thank you so much!
I found my answer here:
https://serverfault.com/questions/308299/how-to-set-a-favicon-ico-for-a-specific-virtual-host-on-nginx#answer-308304
Apparently, for nginx, the default is to put the favicon at the root directory, because nginx directs the clients to get favicon from www.domainname.com/favicon.ico by default.
This means that, (I think) with nginx as the reverse proxy, the favicon request never reaches the express layer, and hence it can't serve it.