Javascript - ERR_CONTENT_LENGTH_MISMATCH

Question

I'm making a basic jQuery playground site. I am getting Error: net::ERR_CONTENT_LENGTH_MISMATCH is happening on page load and the background images are not loading on the page.

The image in question is 300kb and is also dynamically changing. I am assuming this has something to do with file sizes, but I don't really know what.

HTML used originally:

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

JavaScript / jQuery used to change the background:

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="/bg"+backgroundindex+".jpg";
  };
}

Answer 1

I am getting Error: net::ERR_CONTENT_LENGTH_MISMATCH

Have a look at your server logs to determine what the real issue is.

For me the problem lay somewhere between nginx and file permissions:

• tail -f /usr/local/var/log/nginx/error.log or run nginx -t to determine your conf location, where you could specify a custom log path.
• refresh the asset in your browser, eg http://localhost:3000/assets/jquery/jquery.js

You may see something like this in the logs:

"/usr/local/var/run/nginx/proxy_temp/9/04/0000000049" failed (13: Permission denied) while reading upstream for file xyz

Heres how I fixed:

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

Answer 2

Summary

Here is a more detailed explanation of what happened in my case. The selected answer here helped me solve my problem and this is basically a more detailed version of the selected answer on hows and whys!

Explaining Nginx Permissions

You can run nginx as a nobody user and that is the common practice in most sample configs. You will find this line at the top of your config:

user nobody;

It is however suggested that for your web-apps static contents, such as css, js, and image files to allow nginx access and cash it through bypassing your web-app
container. This the part of your config where it reads:

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

This is the folder nginx needs to have access to.

On the other hand, there is nginx dedicated folder where in the above answer's case was in:

/usr/local/var/run/nginx/

In my case (CentOS) it was in:

/var/lib/nginx/

How can things go wrong?

In either of these cases you can break nginx:

1- Nginx runs as nobody but doesn't have the right access to your static folder.

2- Nginx runs as nobody but then runs as root to gain access to your static folder.

Solution

Best solution in my case was to change the permission of the nginx dedicated folder to match with my static folder. And then run nginx with as a user with the right access to both.

Answer 3

If you are using nginx + proxied server, try: proxy_buffering off;

More infos: https://docs.nginx.com/nginx/admin-guide/web-server/reverse-proxy/

Answer 4

My team saw this on a single javascript file we were serving up. Every other file worked fine. We originally saw net::ERR_HTTP2_PROTOCOL_ERROR. We switched from http2 back to http1.1 and then either net::ERR_INCOMPLETE_CHUNKED_ENCODING or ERR_CONTENT_LENGTH_MISMATCH. We ultimately discovered that there was a corporate filter (Trustwave) that was erroneously detecting an "infoleak" (we suspect it detected something in our file/filename that resembled a social security number). Getting corporate to tweak this filter resolved our issues.

Answer 5

In my case, I was using nodemon server.js in a next.js (server side rendered) app. By switching back to node server.js, the error disappeared.

Answer 6

I had the same error when building a rails app. I replaced an image with a different image and didn't change the file name, which threw the error above. Simply changing the file name made the problem disappear.

Answer 7

Another case where this error showed up for me : When trying to download a file from a node server with Angular 7, I had to redirect with window.location.href = <node_server_url> instead of the usual httpClient.get<any>(<node_server_url>).

Answer 8

I had this error when there ware no space left on web server disk.

Answer 9

simply fixing the permission of nginx folder fixed the issue.

chmod -R 755 /opt/nginx/

Answer 10

I am facing the same issue when debugging the app in macOS 13.2:

GET http://dev-ai.poemhub.top/node_modules/.vite/deps/@ant-design_icons.js?v=3c6f6b25 net::ERR_CONTENT_LENGTH_MISMATCH 200 (OK)

check the nginx error log tail -f /opt/homebrew/Cellar/nginx/1.25.0/logs/error.log:

2023/07/17 19:05:29 [error] 35956#0: *17768 kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 192.168.10.62, server: dev-ai.poemhub.top, request: "GET /ai/conversation/page?title=&pageNum=1&pageSize=10 HTTP/1.1", upstream: "http://127.0.0.1:11014/ai/conversation/page?title=&pageNum=1&pageSize=10", host: "dev-ai.poemhub.top", referrer: "http://dev-ai.poemhub.top/"

then I fixed this issue by using this command:

> sudo chown -R xiaoqiangjiang /opt/homebrew/var/run/nginx/proxy_temp

change the xiaoqiangjiang to your own username.

Answer 11

Here's another way to resolve this issue: http://derekneely.com/2009/06/nginx-failed-13-permission-denied-while-reading-upstream/

NOTE: From a security point of view, I don't agree with the link where the author suggests to give 777 permissions to the folders. Give the minimum level needed to get the job done (in this case, 700 should be fine, you could even lower, though I did not try that yet).