I add a line of text to my CSS file, garbage comes through the browser

Question

I'm using Vagrant to manage a VirtualBox instance of Debian Wheezy with PHP 5.5 and nginx 1.4.4. My local environment is Mac OS X 10.9 with PHP 5.5 and Apache 2.2.24. I have a synced directory that points to my document root for this particular project.

My local machine has a VirtualHost setup that also points to the document root for this project. Therefore, I actually have two different URLs that I can point my browser to, and the same code will be executed. One URL hits the virtual machine, while the other URL hits my local Apache installation.

I've been able to edit several PHP files with no problems. I make the changes locally and they immediately show up on both the virtual machine and my local web server. However, whenever I try to edit CSS, things get bizarre. I'm trying to add a single line of CSS to a static CSS file. Something along the lines of:

.body {margin-top:50px}

When I make this change, the virtual machine goes nuts. I'm not sure if it's sending a corrupted file, or if it's just appending a bunch of weird characters at the end of the CSS file, but I can't even paste them here. I did a Charles dump of the request for the CSS file and the response looks like this:

I've looked at the file in vim through the virtual machine. I've looked at the file using multiple text editors. For the life of me I can't find anything wrong with it. When I load the exact same file through my local Apache installation, it works just fine:

Notice that the body declaration appears between button and footer, and there are no weird characters at the end of the document.

The other thing that I noticed is that my the whitespace is being manipulated at some point as well. The CSS file in question uses four spaces for indentation, but in the response from the virtual machine, the lines only have two spaces of indentation. You can't see it from the pictures because they're formatted by Charles, but I looked at the raw data. It's truly bizarre.

Do you have any idea what is causing the manipulation of my CSS file when it is being served via the Vagrant/nginx combo vs my local/Apache combo?

EDIT

I pasted some of the characters into a hexadecimal converter and it converted all the characters to question marks. I tried a binary to decimal conversion and they all turned into �, which from what I can find is "used to replace a character whose value is unknown or unrepresentable in unicode". I ran file --mime on the file and it returned rental-application.js: text/plain; charset=us-ascii. So...nginx settings maybe?

I'm having the exact same issue with JavaScript files. If I vagrant destroy and vagrant up is the only way I've found to resolve the issue so far. It doesn't make for quick troubleshooting when I have to reboot my VM between file saves.

Every method that I use to look at the file works. The only issue is when it is served through nginx, which makes me think I have some type of encoding setting wrong. It's a mostly stock setup.

More bizarre

If I mv rental-application.js rental-application.html and load the page in my browser, it comes across perfectly. The same applies if I change the name to rental-application.php. However, as soon as I change the name to rental-application.js or rental-application.css, my changes disappear and the � characters re-appear at the end of the document.

Even MORE bizarre

I can create a js file on the VM and it will load fine via the VM nginx server. If I subsequently modify the file I just created and reload it, the changes don't appear, just the garbage characters.

If I mv that file to a different name that ends in .js, the garbage character problem still persists. However, if I then cat the contents of the renamed file to a new file with the original name, all is well in the universe.

Answer 1

Just so if people end up here for the same issue, they have the solution on how to resolve this: you need to turn off sendfile() in your web server' settings.

For Apache: EnableSendfile off

For Nginx: sendfile off

Quick explanation: https://coderwall.com/p/ztskha

You can find more online if you need more details.

Now you can get a beer and enjoy your static file being transferred properly, not more corrupted files :)