0

I'm self-hosting a jekyll site with jekyll-admin for editing.

jekyll-admin adds a nodejs based admin panel. I want to be able to access this over the internet via a nginx reverse-proxy.

  • jekyll 4.0.0
  • jekyll-admin 0.9.6
  • node 10.16.3
  • nginx 1.17.4

This configuration works :

server {
     listen 80;

     server_name www.example.com;
     root /home/foo/_site;

     location ^~ /admin {
         auth_basic "Administration";
         auth_basic_user_file /foo/htpasswd;

         proxy_pass http://127.0.0.1:4000/admin;

         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header Host $http_host;
     }

     location ^~ /_api {
         auth_basic "Administration";
         auth_basic_user_file /foo/htpasswd;

         proxy_pass http://127.0.0.1:4000/_api;

         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
         proxy_set_header X-Forwarded-Proto $scheme;
         proxy_set_header X-Real-IP $remote_addr;
         proxy_set_header Host $http_host;
     }

     # caching for static site

     location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
       expires 1M;
       add_header Cache-Control "public";
     }

     location ~* \.(?:css|js)$ {
       expires 1h;
       add_header Cache-Control "public";
     }
 }

However I want to remove the duplication so I merge the two location blocks for the proxy and use a regex:

server {
     listen 80;
     listen [::]:80;

     server_name www.example.com;
     root /home/foo/_site;

     location ~ ^/(admin|_api)(/.*)? {
          auth_basic_user_file /foo/htpasswd;
          auth_basic "Administration";

          proxy_pass http://127.0.0.1:4000$1;

          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header X-Forwarded-Proto $scheme;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header Host $http_host;
     }
}

But my site no longer works - I now get a blank page and the browser error console shows

The resource from “http://www.example.com/admin/styles.css” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). admin

The resource from “http://www.example.com/admin/bundle.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff). admin

Loading failed for the with source “http://www.example.com/admin/bundle.js”. admin:11:1

What is causing the js and css content to get the wrong MIME type here?

The nginx logs show nothing unusual.

1
  • This is not a proper answer, but look very carefully at the effective permissions for nginx to read those files following your change. I had this problem when the files became non-readable to nginx. – Daniel K Oct 3 '19 at 16:48
0

dumb error in proxy_pass

   location ~ ^/(admin|_api)(/.*)? {
      ...
      proxy_pass http://127.0.0.1:4000/$1$2;
    }

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.