NGINX html comes out malformed
Since @tymur999 has already solved this issue, I decided to provide a Community Wiki answer just for better visibility to other community members.
It's important to know that browsers use the MIME type, to choose a suitable displaying method.Therefore, the web server must send the correct MIME type in the response's Content-Type header.
In the MIME types documentation, we can find an important note:
Important: Browsers use the MIME type, not the file extension, to determine how to process a URL, so it's important that web servers send the correct MIME type in the response's Content-Type header. If this is not correctly configured, browsers are likely to misinterpret the contents of files and sites will not work correctly, and downloaded files may be mishandled.
In nginx, we can use the types directive to map file name extensions to MIME types of responses (see: NGINX documentation):
Syntax: types { ... } Default: types { text/html html; image/gif gif; image/jpeg jpg; }Context: http, server, location
NOTE: A sufficiently full mapping table is distributed with nginx in the mime.types file.
As an example, suppose I have a simple website - a single HTML (index.html) and CSS (mystyle.css) file.
$ ls /var/www/html/index.html mystyle.css$ cat /var/www/html/index.html <!DOCTYPE html><html><head></head><body><link rel="stylesheet" href="mystyle.css"/><p>This is a paragraph.</p></body></html>$ cat /var/www/html/mystyle.css body { background-color: aquamarine;}Without the correct MIME type for CSS, my website doesn't work as expected:
NOTE: The text/css MIME type is commented out.
$ grep -Ri -A 3 "types {" /etc/nginx/nginx.conf types { text/html html htm shtml; # text/css css; }
When the text/css MIME type is properly included, everything works as expected:
grep -Ri -A 3 "types {" /etc/nginx/nginx.conf types { text/html html htm shtml; text/css css; }