NGINX html 格式错误答案

【问题标题】：NGINX html comes out malformedNGINX html 格式错误
【发布时间】：2021-06-24 12:10:52
【问题描述】：

我在提供静态内容的 docker 容器中使用 nginx。它在 Kubernetes 中作为同一个文件中另一个服务的 sidecar 运行。

然而，问题在于，虽然提供的是完全相同的 HTML 页面（我使用文本比较器进行了检查），但该页面在 Web 服务器上看起来格式不正确（但当我在本地呈现时很好）

因此，我认为提供某些 css、js 或图像文件存在问题

这是 Kubernetes 部署的一部分

containers:
      - image: <OTHER IMAGE>
        imagePullPolicy: Always
        name: <imagename>
        ports:
        - containerPort: 8888
      - image: <MY NGINX IMAGE>
        imagePullPolicy: Always
        name: <imagename>
        ports:
        - containerPort: 80
        - containerPort: 443
      restartPolicy: Always

The nginx file

The Dockerfile

这里是实际代理的文件路径（kiwoon-pages 中的静态内容）

这里是静态内容

这里有什么看起来明显错误的地方吗？告诉我，谢谢！

【问题讨论】：

我相信我没有指定 mime 类型，所以我会确保这样做并返回这个问题的结果。
是的！这解决了这个问题。浏览器似乎没有应用 CSS 或 JS，因为它是使用 mime 类型 text/plain 发送的。我在代理中添加了 mime 类型，现在效果很好！
您能否描述一下您是如何解决问题的以及答案中的原因是什么？它可能对其他社区成员有所帮助。
因为我没有包含 mime 类型，所以没有使用所有 CSS 和 JS 文件，这导致我的网站看起来格式不正确。因此，通过在我的服务器块中添加include mime.types;，其中包括每个 nginx 代理中的默认 nginx mimetypes，正确的 mime 类型被分配给我的 css 和 js 文件，从而导致它们被使用。

标签： html css nginx kubernetes nginx-reverse-proxy

【解决方案1】：

由于 @tymur999 已经解决了这个问题，我决定提供一个社区 Wiki 答案，只是为了让其他社区成员更好地了解。

了解浏览器使用 MIME 类型以选择合适的显示方式很重要。因此，Web 服务器必须在响应的 Content-Type 标头中发送正确的 MIME 类型。

在MIME types documentation中，我们可以找到一个重要的说明：

重要提示：浏览器使用 MIME 类型而不是文件扩展名来确定如何处理 URL，因此 Web 服务器在响应的 Content-Type 标头中发送正确的 MIME 类型非常重要。如果配置不正确，浏览器可能会误解文件的内容，网站将无法正常工作，下载的文件可能会被错误处理。

在 nginx 中，我们可以使用 types 指令将文件扩展名映射到响应的 MIME 类型（参见：NGINX documentation）：

Syntax: types { ... }   
Default:    
types {   
    text/html  html;   
    image/gif  gif;   
    image/jpeg jpg;   
}

上下文：http、服务器、位置

注意：足够完整的映射表在mime.types文件中随nginx一起分发。

例如，假设我有一个简单的网站 - 一个 HTML (index.html) 和 CSS (mystyle.css) 文件。

$ 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;
}

如果没有正确的 CSS MIME 类型，我的网站将无法按预期运行：
注意：text/css MIME 类型已被注释掉。

$ grep -Ri -A 3 "types {" /etc/nginx/nginx.conf 
        types {
                text/html                             html htm shtml;
                # text/css                              css;
        }

当text/css MIME 类型正确包含时，一切都按预期工作：

grep -Ri -A 3 "types {" /etc/nginx/nginx.conf 
        types {
                text/html                             html htm shtml;
                text/css                              css;
        }

【讨论】：