Express中的MIME类型不匹配

问题描述

我正在尝试从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 代码段

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

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

解决方法

查看包含 static/public 目录的 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>

express html javascript mime-types