MIME type errors with NGINX maintenance config and angular?

I have a maintenance config I created with nginx which I simply swap for my prod one. It is meant to call an index.html which is based on an Angular SPA and route to the /maintenance page created within the application.

If I use try_files /index.html $uri $uri/;, I receive mime type errors in my browser's console (though in the network tab I'm getting 200 responses for the exact same files).

If I swap try_files /index.html $uri $uri/; with try_files $uri $uri/ /index.html ; , I get a too many indirect error and its equivalent within the nginx logs.

Maintenance Config file

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
worker_connections 768;
# multi_accept on;
}

http {

##
# Basic Settings
##
add_header Access-Control-Allow-Origin *;

sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
# server_tokens off;

# server_names_hash_bucket_size 64;
# server_name_in_redirect off;

include /etc/nginx/mime.types;
default_type application/octet-stream;

##
# SSL Settings
##

ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
ssl_prefer_server_ciphers on;

##
# Logging Settings
##

access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;

##
# Gzip Settings
##

gzip on;

##
#Original IP Forwarding
##
proxy_set_header X-Forwarded-For $remote_addr;

##
# Virtual Host Configs
##
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
return 301 https://$host$request_uri;
}

server{
listen 443 ssl;
server_name mysite.com;
root /etc/mysite/enabled-sites/ngbuild/browser;

location / {
if ($uri != /maintenance) {
return 302 https://$host/maintenance;
}
try_files /index.html $uri $uri/;
}

}

}



Additionally, my prod config uses try_files $uri $uri/ /index.html; for its locations which serves the production application just fine. If I swap that to try_files /index.html $uri $uri/; I then also get mime type errors in production.

Continue reading...