Javascript – ERR_CONTENT_LENGTH_MISMATCH

Ich mache eine einfache Jquery-Playground-Site. Ich bekomme Fehler: net::ERR_CONTENT_LENGTH_MISMATCH passiert beim Laden der Seite und die Hintergrundbilder werden nicht auf die Seite geladen.

Das fragliche Bild ist 300 KB groß und ändert sich auch dynamisch. Ich gehe davon aus, dass dies etwas mit der Dateigröße zu tun hat, aber ich weiß nicht genau, was.

Ursprünglich verwendetes HTML:

<p style="margin:0px; padding:0px;">
  <img id="background" src="https://stackoverflow.com/bg1.jpg" style="width:100%;" border="0" alt="Null">
</p>

javascript / jquery verwendet, um den Hintergrund zu ändern:

var changebg = function() {
  if (myscore % 20 == 0) {
    level++;
    document.getElementById("level").innerHTML = "Level: " + level;
    $("#level").fadeIn(1500, function(){$("#level").hide()})
    backgroundindex++;
    if (backgroundindex > 6) {
      backgroundindex == Math.floor((Math.random()*6)+1)};
    document.getElementById("background").src="https://stackoverflow.com/bg"+backgroundindex+".jpg";
  };
}

Ich erhalte den Fehler: net::ERR_CONTENT_LENGTH_MISMATCH

Sehen Sie sich Ihre Serverprotokolle an, um festzustellen, was das eigentliche Problem ist.

Bei mir lag das Problem irgendwo zwischen nginx und Dateiberechtigungen:

• tail -f /usr/local/var/log/nginx/error.log oder laufe nginx -t um Ihren conf-Speicherort zu bestimmen, wo Sie einen benutzerdefinierten Protokollpfad angeben können.
• Aktualisieren Sie das Asset in Ihrem Browser, z http://localhost:3000/assets/jquery/jquery.js

Möglicherweise sehen Sie in den Protokollen Folgendes:

„/usr/local/var/run/nginx/proxy_temp/9/04/0000000049“ fehlgeschlagen (13: Berechtigung verweigert) beim Lesen der Upstream-Datei xyz

Hier ist, wie ich behoben habe:

sudo nginx -s stop    
sudo rm -rf /usr/local/var/run/nginx/*    
sudo nginx

Zusammenfassung

Hier ist eine detailliertere Erklärung dessen, was in meinem Fall passiert ist. Die hier ausgewählte Antwort hat mir geholfen, mein Problem zu lösen, und dies ist im Grunde eine detailliertere Version der ausgewählten Antwort zum Wie und Warum!

Erläuterung der Nginx-Berechtigungen

Du kannst rennen nginx Als ein nobody Benutzer und das ist die gängige Praxis in den meisten Beispielkonfigurationen. Sie finden diese Zeile oben in Ihrer Konfiguration:

user nobody;

Es wird jedoch empfohlen, dass statische Inhalte Ihrer Web-Apps, wie CSS-, JS- und Bilddateien, nginx-Zugriff erlauben und ihn durch Umgehung Ihrer Web-App einlösen
Container. Dies ist der Teil Ihrer Konfiguration, in dem es heißt:

location ^~ /static {
    alias /path/to/your/static/folder/;
    autoindex on;
    expires max;    
}

Das ist der Ordner nginx Zugang haben muss.

Auf der anderen Seite gibt es nginx dedizierter Ordner, in dem sich der Fall der obigen Antwort befand:

/usr/local/var/run/nginx/

In meinem Fall (CentOS) war es in:

/var/lib/nginx/

Wie kann etwas schief gehen?

In beiden Fällen können Sie brechen nginx:

1- Nginx wird als Niemand ausgeführt, hat aber nicht den richtigen Zugriff auf Ihren statischen Ordner.

2- Nginx wird als Niemand ausgeführt, wird dann aber als Root ausgeführt, um Zugriff auf Ihren statischen Ordner zu erhalten.

Lösung

Die beste Lösung in meinem Fall war, die Berechtigung des nginx-dedizierten Ordners so zu ändern, dass sie mit meinem statischen Ordner übereinstimmt. Und führen Sie dann nginx with als Benutzer mit dem richtigen Zugriff auf beide aus.

Wenn Sie nginx + Proxy-Server verwenden, versuchen Sie Folgendes:
proxy_buffering off;

Weitere Infos: https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

In meinem Fall habe ich verwendet nodemon server.js in einem next.js (serverseitig gerenderte) App. Durch Zurückschalten auf node server.js, der Fehler ist verschwunden.

Mein Team hat dies in einer einzigen Javascript-Datei gesehen, die wir bereitgestellt haben. Alle anderen Dateien funktionierten einwandfrei. Wir haben ursprünglich gesehen net::ERR_HTTP2_PROTOCOL_ERROR. Wir wechselten von http2 zurück zu http1.1 und dann entweder net::ERR_INCOMPLETE_CHUNKED_ENCODING oder ERR_CONTENT_LENGTH_MISMATCH. Wir entdeckten schließlich, dass es einen Unternehmensfilter (Trustwave) gab, der fälschlicherweise ein „Infoleak“ erkannte (wir vermuten, dass er etwas in unserer Datei/Dateinamen entdeckte, das einer Sozialversicherungsnummer ähnelte). Das Unternehmen dazu zu bringen, diesen Filter zu optimieren, löste unsere Probleme.

Ich hatte den gleichen Fehler beim Erstellen einer Rails-App. Ich habe ein Bild durch ein anderes Bild ersetzt und den Dateinamen nicht geändert, wodurch der obige Fehler ausgelöst wurde. Durch einfaches Ändern des Dateinamens verschwand das Problem.

Ein weiterer Fall, in dem dieser Fehler bei mir auftauchte: Beim Versuch, eine Datei von einem Node-Server mit Angular 7 herunterzuladen, musste ich mit umleiten window.location.href = <node_server_url> statt wie üblich httpClient.get<any>(<node_server_url>).