Jquery 脚本在 html 文件中工作但从外部文件导入时失败

Question

当我发现这个问题时，我正在关注 socket.io 网站上的文档。

我的工作代码

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
$(document).ready(function() {
 $(function () {
   var socket = io();
   $('form').submit(function(e) {
     e.preventDefault(); // prevents page reloading
     socket.emit('chat message', $('#m').val());
     $('#m').val('');
     return false;
   });
 });
})
</script>

当从外部文件导入相同的 jquery 脚本时，它会失败。

client.js包含完全相同的 jquery 脚本并位于同一目录中。

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="client.js"></script>

下面是来自控制台的错误，我无法弄清楚它是什么

The resource from “http://localhost:3000/client.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff).

Answer 1

将该脚本的类型更改为“application/javascript”。 此外，如果您发现脚本未加载，请将 defer 属性添加到脚本标记中，如下所示。

<script type="application/javascript" defer src="./client.js"></script>

最后，我看到了类似的问题，其中 js 不在您引用的源代码中。 请确保您的源链接是正确的。