Solved: Help check my nginx conf, MIME issue

Questions / Help
1

I have deployed a Laravel app and want to run Swoole (Octane).

The app works correctly if I use a php-fpm but because it is Livewire driven, the an unacceptable 1sec latency is present on all HTTP and XML requests.

This latency is 50ms using Swoole which is great. The only problem I have is:

One of my important javascript files fails to load because of a MIME error see:

Chrome: Refused to execute script from 'https://app.aeroquote.com/admin/dashboard' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Safari: [Error] Refused to execute https://app.aeroquote.com/livewire/livewire.js?id=de3fca26689cb5a39af4 as script because "X-Content-Type-Options: nosniff" was given and its Content-Type is not a script MIME type.

Where have I gone wrong ?

ping @fideloper-fly and @greg

webuser@e28b2d9f:/etc/nginx/sites-enabled$ cat default 
# HTTP configuration
#
server {
	listen 8080 default_server;
	listen [::]:8080 default_server;

	root /var/www/html/public;

	# Set allowed "index" files
	index index.html index.htm index.php;

	server_name _;

	charset utf-8;

	# Set max upload to 2048M
	client_max_body_size 2048M;

	location /index.php {
        try_files /not_exists @octane;
    }

    location / {
        try_files $uri $uri/ @octane;
    }

    location @octane {
        set $suffix "";

        if ($uri = /index.php) {
            set $suffix ?$query_string;
        }

        proxy_http_version 1.1;
        proxy_set_header Host $http_host;
        proxy_set_header Scheme $scheme;
        proxy_set_header SERVER_PORT $server_port;
        proxy_set_header REMOTE_ADDR $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;

        proxy_pass http://127.0.0.1:8000$suffix;
    }

	# additional config
	include /etc/nginx/server-opts.d/*.conf;
2

Update, I have solved this by “publishing” the Livewire assets. Livewire serves the livewire.js file via the laravel app as default. Nginx cannot “see” this file and and such cannot serve it. See more below from https://github.com/livewire/livewire/issues/242#issuecomment-948054946

I was experiencing this issue “livewire.js - 404 not found” too … on the NGINX server.
The same app worked fine in an apache2 environment.
The same app also worked fine when nginx is acting as reverse proxy and just passing the data to apache2.

So i figured the issue is not any setting in the app - it is NGINX related.
And it makes absolut sense.
NGINX is a very performant web server (among other things) … this is because (next to many other reason) static files are not passed on to the php interpreter, they are served and cached directly.

What is happening with livewire (unless the assets are published and actually existing on the server, so nginx can serve them) is that the livewire.js file is build/served by the laravel app … this means PHP. But in the default nginx server configuration the request never gets that far, nginx just does not find the static js file and returns the 404 … never passing the request to the laravel app.

Cutting a long story short … there is 2 solutions to fix this issue:

1.) publish the livewire.js file any any other static file, so nginx can return them.

2.) Add one line of code to the nginx config to tell nginx to check if the static file can be found on the disk/cache if not send the request to php-fpm (in our case the index.php file) so it can be build dynamically.

Here is the code … usually you may already have a directive in your nginx config that tells nginx what to do with static files … just add this line within the directive:

try_files $uri /index.php?$query_string;

1 Like