Express 中的 MIME 类型不匹配答案

【问题标题】：MIME Type Mismatch in ExpressExpress 中的 MIME 类型不匹配
【发布时间】：2020-12-17 10:56:01
【问题描述】：

我正在尝试从 Express 加载使用 JS（在不同位置）的页面。但是，当我加载页面时，我总是得到 MIME 类型不匹配，如下所示：

The resource from “http://localhost:3000/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/datamaps/dist/datamaps.world.min.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

我已经看到，如果 nosniff 的 X-content 选项被传递，脚本元素会拒绝那些 MIME 类型不正确的响应。我该怎么做：

修复内容响应以发送正确的标头 (javascript)
删除 nosniff 选项

lucidmap.html

<!DOCTYPE html>
<html>
<script src="/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/d3/build/d3.min.js"></script>
<script src="/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/topojson/dist/topojson.min.js"></script>
<script src="/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/datamaps/dist/datamaps.world.min.js"></script>
<div id="container" style="position: relative; width: 500px; height: 300px;"></div>

<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

<script>
    var map = new Datamap({element: document.getElementById('container')});
</script>

</body>
</html>

Express.js 代码 sn-p

app.get('/lucidmap', function(req, res) {
    res.sendFile('/home/lucid-user/lucid/lucidApp-ubuntu/views/app/lucidmap.html');
});

使用的浏览器是用于 Ubuntu 的 Mozilla 77.0.1 64 位。

【问题讨论】：

您如何提供.js 文件？
@eol 我只是从 HTML 中调用脚本文件，你不能这样做吗？
好吧，在加载lucidmap.html 时，您的浏览器将请求三个.js 文件（来自您的<script>-tags）。您还需要从您的服务器提供这些文件。
@eol 哦，所以我也需要使用 Express 来提供文件，类似于：expressjs.com/en/starter/static-files.html
是的，正是:)

标签： javascript html node.js express mime-types

【解决方案1】：

查看包含静态/公共目录的 Express 代码会更有帮助。

这是应该如何完成的：在您的快速代码中编写如下内容：

app.use("/public", express.static("/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/datamaps/dist"));

在“/public”目录中添加您想要的所有链接，如下所示在您的快速代码中：

...
app.use("/public", express.static("/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/datamaps/dist"));
app.use("/public", express.static("/home/lucid-user/lucid/lucidApp-ubuntu/node_modules/topojson/dist/"));
...

那么你只需要写在你的HTML代码中：

<script src="/public/datamaps.world.min.js"></script>
<script src="/public/topojson.min.js"></script>

然后另一个提示：最佳做法是将所有标签放在标签内，最后，就在 . 它应该是这样的：

<body>
    .
    .
    <script src="/public/datamaps.world.min.js"></script>
    <script src="/public/topojson.min.js"></script>
</body>

【讨论】：