html - NGINX html 格式错误

问题描述

我在提供静态内容的 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

nginx文件

Dockerfile

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

这是静态内容

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

标签： htmlcssnginxkubernetesnginx-reverse-proxy

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

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

在MIME 类型文档中，我们可以找到一个重要说明：

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

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

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 类型，我的网站将无法按预期工作：
注意： MIMEtext/css类型已被注释掉。

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

html - NGINX html 格式错误

问题描述

解决方案

推荐阅读