Nginx run java webapp as non root using cloudflare ssl

[victor.dbu]

I am running metabase with nginx with the following configuration: /etc/nginx/sites-available/example.com

server {

    # SSL configuration

    listen 443 ssl http2;
    listen [::]:443 ssl http2;
    ssl        on;
    ssl_certificate         /etc/ssl/certs/cert.pem;
    ssl_certificate_key     /etc/ssl/private/key.pem;
    ssl_client_certificate /etc/ssl/certs/cloudflare.crt;
    ssl_verify_client on;
    server_name example.com www.example.com;

    root /var/www/example.com/html;
    index index.html index.htm index.nginx-debian.html;

    location / {
    proxy_pass http://127.0.0.1:3000/;
    }   
}

This works with Cloudflare with both Full and Full(strict) settings having Always Use HTTPS and Automatic HTTPS Rewrites both ON and Rocket Loader™ OFF

If I try to run the proxy_pass on a non-root location for example

   location /metabase/ 
        {
        proxy_pass http://127.0.0.1:3000/;
        }

I get (in Firefox console):

The resource from “https://example.com/app/dist/app-main.bundle.css?4ccd5c23fd3dcf61a206fe52be657d90” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “https://example.com/app/dist/styles.bundle.css?dcf6d19a625c0113333c2f87a9aaef16” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “https://example.com/app/dist/styles.bundle.js?3f8f0db4d958de85c2e9” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

The resource from “https://example.com/app/dist/vendor.bundle.js?3f8f0db4d958de85c2e9” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

In chrome console

Refused to apply style from 'https://example.com/app/dist/vendor.bundle.css?69e4c60679defb49c969e3d7051532f1' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled
....

And the page is blank because no stylesheet or javascript is loaded :(.

There is a solution to a similar problem but it’s on apache. Is there anything similar on nginx?

I don’t know for sure if it’s a nginx issue or Cloudflare or a combination of both.

[sandro]

Can you post the actual URL?

[victor.dbu]

Sorry, but I would rather not, I am concerned about some security issues right now.
Reading this I ended up using a subdomain and it works, but I still haven’t found a solution to run on a non-root location

[sandro]

In that case it is impossible to provide actual suggestions.

It would seem as if your server returns HTML instead of the expected content, but that is something you will have to debug. Check whether that could be a Cloudflare challenge.

[victor.dbu]

Do you have any suggestions on how to debug the issue? For example nginx error log isn’t logging anything useful regarding this.
Even on the subdomain I still get some occasional errors for mime type (but the site works overall, most of the scripts and css load)
Refused to execute script from 'https://example.com/snippets/text.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
And I am getting a new error

Refused to load the script 'https://static.cloudflareinsights.com/beacon.min.js' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' https://maps.google.com https://apis.google.com ... Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

[sandro]

As for debugging, I’d take this to StackExchange.

As for the CSP message, you’d need to include static.cloudflareinsights.com in your CSP directive. Should Browser Insights not be of interest to you, you could also ignore that message.