skip to Main Content

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


  1. You probably just need to remove the =404 from the following line, like so:

    try_files $uri $uri/ /index.html =404; 
    try_files $uri $uri/ /index.html;
    

    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.

    Login or Signup to reply.
  2. 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

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search