Javascript - ERR_CONTENT_LENGTH_MISMATCH

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 dont 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";
  };
}

Solution 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

Solution 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.