MIME error on nginx behind reverse proxy

[daniel-koertvelyessy]

Flux version

v1.1.3

Livewire version

v3.5.18

What is the problem?

Hey there, it is me again :(

Server public location is https://ungarische-kolonie-berlin.org

I managed to close my last issue #1022 Thanks to @jeffchown

Now I wanted to login and got a 419 page expired error. My initial idea was an error in the .env file. However, inspecting the development window, I saw 3 errors:

Refused to apply style from 'https://ungarische-kolonie-berlin.org/flux/flux.css?id=da3247ce' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

ungarische-kolonie-berlin.org/:1 Refused to execute script from 'https://ungarische-kolonie-berlin.org/flux/flux.js?id=1b1c233a' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

ungarische-kolonie-berlin.org/:1 Refused to execute script from 'https://ungarische-kolonie-berlin.org/livewire/livewire.js?id=951e6947' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I added the nginx configuration as proposed in the documentation

location ~ ^/flux/flux(\.min)?\.(js|css)$ {
    expires off;
    try_files $uri $uri/ /index.php?$query_string;
}

Following issue #50 I added two other directives from @mauritskorse configuration

  location ~ ^/livewire/livewire(\.min)?\.js$ {
        expires off;
        try_files $uri $uri/ /index.php?$query_string;
    }
    location ~ ^/flux/flux(\.min)?\.(js|css)$ {
        expires off;
        try_files $uri $uri/ /index.php?$query_string;
    }

    location ~* \.(js|css|png|jpg|gif|ico|txt|pdf)$ {
    #    access_log off;
        add_header Cache-Control public;
        add_header Vary Accept-Encoding;
        expires 1d;
        try_files $uri $uri/ /index.php?$query_string;
    }

Still, the errors remain.

As always, ideas hints are more than welcomed

Best wishes,
Daniel

Code snippets

Refused to apply style from 'https://ungarische-kolonie-berlin.org/flux/flux.css?id=da3247ce' 
because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME 
checking is enabled.

What is interesting is, that the path {root}/public/flux/ does not exist on the server. Neither on the development nor the production one.

So I went through the installation process again. But still with no change.

How do you expect it to work?

Rendered header section:

<link rel="stylesheet" href="[/flux/flux.css?id=da3247ce](view-source:https://ungarische-kolonie-berlin.org/flux/flux.css?id=da3247ce)">
<script>
    let appearance = window.localStorage.getItem('flux.appearance') || 'system'

    if (appearance === 'system') {
        appearance = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
    }

    appearance === 'dark' ? document.documentElement.classList.add('dark') : document.documentElement.classList.remove('dark')
</script>
<!-- Livewire Styles --><style >[wire\:loading][wire\:loading], [wire\:loading\.delay][wire\:loading\.delay], [wire\:loading\.inline-block][wire\:loading\.inline-block], [wire\:loading\.inline][wire\:loading\.inline], [wire\:loading\.block][wire\:loading\.block], [wire\:loading\.flex][wire\:loading\.flex], [wire\:loading\.table][wire\:loading\.table], [wire\:loading\.grid][wire\:loading\.grid], [wire\:loading\.inline-flex][wire\:loading\.inline-flex] {display: none;}[wire\:loading\.delay\.none][wire\:loading\.delay\.none], [wire\:loading\.delay\.shortest][wire\:loading\.delay\.shortest], [wire\:loading\.delay\.shorter][wire\:loading\.delay\.shorter], [wire\:loading\.delay\.short][wire\:loading\.delay\.short], [wire\:loading\.delay\.default][wire\:loading\.delay\.default], [wire\:loading\.delay\.long][wire\:loading\.delay\.long], [wire\:loading\.delay\.longer][wire\:loading\.delay\.longer], [wire\:loading\.delay\.longest][wire\:loading\.delay\.longest] {display: none;}[wire\:offline][wire\:offline] {display: none;}[wire\:dirty]:not(textarea):not(input):not(select) {display: none;}:root {--livewire-progress-bar-color: #2299dd;}[x-cloak] {display: none !important;}</style>
</head>

if I curl the flus.css file, I get the following return:

curl -I https://ungarische-kolonie-berlin.org/flux/flux.css
HTTP/1.1 200 OK
Server: nginx
Date: Fri, 24 Jan 2025 19:10:14 GMT
Content-Type: text/html; charset=UTF-8
Connection: keep-alive
Cache-Control: private, must-revalidate
pragma: no-cache
expires: -1
Set-Cookie: XSRF-TOKEN=eyJpdiI6ImZoeTRYN0ZpQkg2b1ZYRWs2Z2FsS0E9PSIsInZhbHVlIjoiQUI2cmZNZUZkaXduTnJiR1VLbENsYS82SWtiQnpKOUdoL2VDd0ZkMGY1cjF2NmV0Q0ticUZQM012S2VleEMyV3hpMEcvY3NjV2Y2R0Nla1ZYMTBzNllzQWhBbnN2VUhqdHZrZFN3azhsODJqcDNqYWdmNEJqVThYaGp1V3RaQTkiLCJtYWMiOiJiZWE0NzczMzQ0ZmE3ZjM2YzVmZTE4Y2FjZDE1MmQ4YzY4OTcyY2Q1ZTJhODE5YjVhZjkyZjQyNWU4MzQ0NDdkIiwidGFnIjoiIn0%3D; expires=Fri, 24 Jan 2025 21:10:14 GMT; Max-Age=7200; path=/; secure; samesite=lax
Set-Cookie: ungarische_kolonie_org_session=eyJpdiI6IlZlRlNycTkwMUQ5ejZVa0JHZnRZV1E9PSIsInZhbHVlIjoiSUFzbEFEMkVabVNGYThWTjFuUWdmOVlUVUlQSFo2dGkvdm1uZ201b1RJWjdPa0FicGllQk5tc01ENWpZNk4vY0V0UlBOQnMwTWxuRzVXVXhQaXAyUEhSeU0zUlhlMDlRNkY4UlhsaU0zSWhiZ0EvemhEUkZHaldxT0JPK1VrNHAiLCJtYWMiOiJiNDA2YWQzYzgyZTI5ZmU5ZDcyNjk1YzA4ZWFlN2YxY2RiZGQyYTFmOTJlNTM5MzUzMmM0ZDE5NDlkMTcyZTZjIiwidGFnIjoiIn0%3D; expires=Fri, 24 Jan 2025 21:10:14 GMT; Max-Age=7200; path=/; secure; httponly; samesite=lax
X-Frame-Options: DENY
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
X-Content-Type-Options: nosniff

Why is the header section

X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN

listed twice?

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[trianity]

Please read this thread: #869
I was run also to this issue and symlinking flux from public folder resolved the issue.

cd public
ln -s ../vendor/livewire/flux-pro/dist flux

[daniel-koertvelyessy]

Köszi sépen / Thank you for the good idea.

the smylink is there:

/{root}/public$ ll

drwxrwxr-x  3 root www-data 4096 Jan 25 16:37 ./
drwxrwxr-x 15 root www-data 4096 Jan 25 16:37 ../
-rw-r--r--  1 root root      740 Jan 25 16:37 .htaccess
drwxrwxr-x  3 root www-data 4096 Jan 25 16:37 build/
-rw-r--r--  1 root root        0 Jan 25 16:37 favicon.ico
lrwxrwxrwx  1 root www-data   32 Jan 25 16:21 flux -> ../vendor/livewire/flux-pro/dist/
-rw-r--r--  1 root root      468 Jan 25 16:37 index.php
-rw-r--r--  1 root root       24 Jan 25 16:37 robots.txt

The syslink works as I can cd into it:

/{root}/public/flux$ ll

drwxrwxr-x 2 root www-data   4096 Jan 14 21:27 ./
drwxrwxr-x 6 root www-data   4096 Jan 14 21:27 ../
-rwxrwxr-x 1 root www-data   3956 Jan 14 21:27 editor.css*
-rwxrwxr-x 1 root www-data 725105 Jan 14 21:27 editor.js*
-rwxrwxr-x 1 root www-data 325952 Jan 14 21:27 editor.min.js*
-rwxrwxr-x 1 root www-data 684960 Jan 14 21:27 editor.module.js*
-rwxrwxr-x 1 root www-data  24120 Jan 14 21:27 flux.css*
-rwxrwxr-x 1 root www-data 225348 Jan 14 21:27 flux.js*
-rwxrwxr-x 1 root www-data 108173 Jan 14 21:27 flux.min.js*
-rwxrwxr-x 1 root www-data 212709 Jan 14 21:27 flux.module.js*
-rwxrwxr-x 1 root www-data    112 Jan 14 21:27 manifest.json*

Sadly, it did not solve the issue.

It still renders the homepage if I try to open https://ungarische-kolonie-berlin.org/flux/flux.css

I will try to dig deeper into it.

Thanks again :D

[trianity]

@daniel-koertvelyessy (Szívesen)
In total, I spent about 3-4 hours solving this problem on my own system. My development system is Apache2 (and there is no problem using Flux there), the production server was Nginx 1.26.

In the Nginx settings, I had to correct the use of the http2 protocol, the use of TLSv1.2 and TLSv1.3, and I also had to regenerate the SSL certificate for the main services of the server with a 4096 byte key.

And as I corrected the Nginx settings, the MIME-type problem disappeared after one Nginx restart.

The problem is clearly an Nginx configuration error, but the solution may depend on several other things.
According to the check, TLSv1.3 is fine. https://www.cdn77.com/tls-test/result?domain=ungarische-kolonie-berlin.org

So you just have to go through all the Nginx settings that can override the desired setting.

And of course, don't forget to clear the caches (view, config, and route).

[joshhanley]

@daniel-koertvelyessy thanks for reporting! This isn't an issue with Flux directly, but more an issue with your Nginx setup. I have tested deploying Flux with Forge and CloudPanel and each of them have different Nginx configs that sometimes require changing, so it's hard to come up with a one size fits all answer. Can you share your Nginx configs for your server and if your proxy is using Nginx, can you share that too?