在浏览器中查看时，HTML 未应用 CSS答案

【问题标题】：HTML is not applying the CSS when viewed in browser在浏览器中查看时，HTML 未应用 CSS
【发布时间】：2021-11-30 10:20:22
【问题描述】：

我在 docker 容器中使用管理员。

对于测试服务，我使用 URL mydomain.tld。为了直接寻址这个容器，我可以公开一个端口并映射，例如，端口8081 到管理员端口8080。

通过http://mydomain.tld:8081 直接寻址此容器没有问题，一切正常，登录对话框如下所示：

但是，这种方法会暴露用户和密码，所以不应该使用它。

但是，通过 https 使用相同的 docker 容器，我得到一个错误的页面。在这种情况下，通过地址https://mydomain.tld/adm 调用容器，该地址由地址为mydomain.tld 的Web 服务器在端口443 处转发到管理员容器以服务请求。方法很简单。结果与前者相同。为什么这不起作用？

我使用nginx 作为代理并且连接到管理员容器很好。现在我使用yaws 并将调用传递给管理员容器。

很明显，js 和 css 文件并没有被浏览器应用，无论是 Opera、Chrome、UR、Vivaldi、Edge 还是 Firefox，尽管源代码是正确且良好的。除 Firefox 外，没有浏览器在控制台中显示错误（错误消息由 Bing 翻译，我强调），但这些错误显然是错误归因的：

样式表 https://mydomain.tld/adm?file=default.css&version=4.8.1 未加载，因为其 MIME 类型 text/html 不是 text/css。

https://mydomain.tld/adm?file=functions.js&version=4.8.1 的脚本已加载，即使其 MIME 类型 (text/html) 不是对 JavaScript 有效的 MIME 类型。

这些错误信息是不正确的，从源代码中可以看出：MIME 类型肯定是text/css，rel 是stylesheet，并且脚本无论如何都应该是Javascript。

<link rel="stylesheet" type="text/css" href="?file=default.css&amp;version=4.8.1">
<script src='?file=functions.js&amp;version=4.8.1' nonce="ZDA0ODE4Y2ZhZWY1NzkyZTUxNzg3MGZlNTdlNTcxM2M="></script>

为什么 Firefox 将它们解释为 text/html（可能其他浏览器也是如此）？

当然，使用 GET 变量的相应 URL 看起来 不像标准文件，但它们应该可以工作，而且它们实际上可以通过多种方法显示：

如前所述，通过html 和端口8081 调用容器时，相同的源代码运行良好。
点击https 版本的HTML 源代码中的这些链接可以在任何浏览器中毫无问题地加载文件，这是应该的。
同样，开发者工具网络分析显示所有这些的 HTTP 代码 200，即使在 Firefox 中也是如此。

这在我看来证明浏览器接收到的代码是可以的，这里没有问题。无论哪种方式，源代码都是相同的，除了路径。

我什至操纵了 adminer 容器的输出以提供完整路径，但正如所料，这并没有改变任何事情，以下场景也证明了这一点：

在本地文件中使用任一输出的源代码。这里的引用不能被浏览器扩充，所以我们必须手动添加完整路径。通过在http 和https 版本之间切换路径FULL_PATH，我可以从本地文件重现该行为：

<link rel="stylesheet" type="text/css" href="FULL_PATH?file=default.css&amp;version=4.8.1"> 
<!-- http://mydomain.tld:8081/ works; https://mydomain.tld/adm/ works per click, but not in browser-->

这个文件甚至不是https，因为它是从本地文件调用的，只有一个链接。

尽管开发人员工具显示一切正常，但浏览器为什么不以 https 的情况打开这些文件？这里有什么问题？是否有隐藏开关阻止使用 https 呈现这些文件？

我如何才能更智能地调试此问题以找到原因和补救措施？我现在已经没有想法了。

另请参阅yaws crashes with httpc:request for URL served by docker container，了解如何生成 html 内容。

【问题讨论】：

我发现了一些奇怪的东西。使用 curl 我看到该地址只被调用一次。原因是curl不关心css、js之类的。正如预期的那样，使用浏览器会发起额外的调用，例如adm:8080/?file=default.css&version=4.8.1。但是有一个电话是出乎意料的：“adm:8080/?script=version。不知道这是从哪里来的。也许这是导致错误的原因。我会尝试清除它，看看我得到了什么。
抱歉，这个解决方法也没有奏效。
如果我将端口 8081 限制为我自己的 IP，那么使用端口 8081 的解决方法并没有那么糟糕。所以我可以快乐地生活，但我仍然对解开这个谜感到好奇。

标签： css docker browser yaws adminer

【解决方案1】：

为什么 Firefox 将它们解释为 text/html（可能其他浏览器也是如此）？

如果您查看开发人员工具的“网络”选项卡，我很确定您会看到这些文件带有 Content-type: text/html HTTP 响应标头，因此浏览器将它们视为 HTML而不是 CSS 和 Javascript。

查看 Yaws 文档，您的 out_adm 函数似乎需要在为了响应正确的标题。

【讨论】：

非常感谢，这听起来很合理。你的假设是正确的。但是，您的补救措施不起作用： appmod:0 crashed or ret bad val:{html,"text/javascript", .... 我的结论是语法错误。你在哪里找到有关在 Yaws 中发送 css/js 的信息？我用谷歌搜索了一个小时，并没有找到有关如何添加此类标题信息的提示。我试过了，例如在 {html, Html} 之前调用 yaws_api:mime_type(global, ".css");无济于事。
我是从yaws.hyber.org/yman.yaws?page=yaws_api 那里得到的。在“从out / 1返回值”的中途，它提到了{html, DeepList}和{content, MimeType, Content}，所以我认为这会起作用......
假设您使用的是 Yaws 2.0.9，我们最好的选择是 2.0.9 yaws.pdf file。在那里，它解释说“[{content, ...}] 返回值只允许在只有一个部分且根本没有 html 部分的 YAWS 文件中。”如果您使用的是 appmod，则希望返回 {header, {content_type, "text/css"}} 标头说明符作为响应的一部分，如 pdf 第 36 页所述。
非常感谢你们两位。对不起，不知怎的，我没有得到通知，所以我迟到了。我将代码更改为 {header, {content_type, "text/javascript"}}, {html, Html};不过，这不是。没有错误，但警告：构造了一个术语，但从未使用过。我究竟做错了什么？此外，Firefox 开发人员工具不仅提供 200 个 html，而且单击例如css 文件显示带有 Accept text/css,/;q=0.1 的请求标头 (504 B) 那么为什么这仍然被限定为 html？
就像我说的，您希望标头说明符作为响应的一部分；您收到警告是因为标题不在响应中。尝试返回 [{header, {content_type, "text/javascript"}}, {html, Html}]。

【解决方案2】：

最后，变通方法是多余的，而且解决方案很简单：在 yaws.conf 中使用 Yaws 和 revproxy = / http://adm:8080，使用新的服务器指令 abc.mydomain.tld。

不过，还有很多东西要学。谢谢你们的努力。

【讨论】：