I’ve been debugging this like a mad man and hopefully, someone can shed some light on this for me.
TLDR:
If I omit the try_files in the reverse proxy the app works perfectly though returns a 404 whenever the page is reloaded or a link browsed to directly.
If I include the try_files in the reverse proxy I get a bunch of MIME type errors below.
Refused to apply style from 'https://app.fwslift.com/styles.f078b28aa628841d3165.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
Refused to execute script from 'https://app.fwslift.com/runtime.4d85aaa8b193e87dd636.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
I have an angular app running in a nginx:alpine container with the following config that gets copied in at build (probably not the easiest implementation to get CORs to work but alas):
server {
listen 80;
sendfile on;
default_type application/octet-stream;
gzip on;
gzip_http_version 1.1;
gzip_disable "MSIE [1-6].";
gzip_min_length 256;
gzip_vary on;
gzip_proxied expired no-cache no-store private auth;
gzip_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_comp_level 9;
root /usr/share/nginx/html;
location / {
try_files $uri $uri/ /index.html =404;
if ($request_method = 'OPTIONS') {
add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
add_header 'Access-Control-Max-Age' 1728000;
add_header 'Content-Type' 'text/plain charset=UTF-8';
add_header 'Content-Length' 0;
return 204;
}
if ($request_method = 'GET') {
add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
}
if ($request_method = 'POST') {
add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
}
if ($request_method = 'PUT') {
add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
}
if ($request_method = 'DELETE') {
add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
}
if ($request_method = 'PATCH') {
add_header 'Access-Control-Allow-Origin' 'https://app.fwslift.com';
add_header 'Access-Control-Allow-Credentials' 'true';
add_header 'Access-Control-Allow-Headers' 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range';
add_header 'Access-Control-Allow-Methods' 'GET,POST,OPTIONS,PUT,DELETE,PATCH';
}
}
}
My ubuntu host is running nginx natively and serving as a reverse proxy with these configs:
server {
listen 80;
server_name app.fwslift.com;
include snippets/letsencrypt.conf;
return 301 https://$host$request_uri;
}
server {
listen 443 ssl http2;
listen [::]:443 ssl http2;
server_name app.fwslift.com;
ssl_certificate /etc/letsencrypt/live/app.fwslift.com/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/app.fwslift.com/privkey.pem;
ssl_trusted_certificate /etc/letsencrypt/live/app.fwslift.com/chain.pem;
include snippets/ssl.conf;
include snippets/letsencrypt.conf;
location / {
# try_files $uri $uri/ /index.html;
proxy_pass http://localhost:5001/;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
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-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Port $server_port;
}
}
I’ve tried to link the MIMEs directly to each of these configs as well as a handful of other "Throw stuff at the wall" things.
Can anyone give me guidance on this? Thanks!
2
Answers
You probably just need to remove the
=404
from the following line, like so:this will redirect all requests that don’t match a static file to the index.html. After that the angular router takes care of the rest.
If you’re serving the app completely from your proxy server you don’t use try_files.
If you want to server the files statically that’s where you use try_files.
Just remove it
A better approach for deploying your app is building it and then use the Nginx static server