由于 MIME 类型 (“text/html”) 不匹配 (X-Content-Type-Options: nosniff)，来自“http://localhost:3000/script.js”的资源被阻止答案

【问题标题】：The resource from “http://localhost:3000/script.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)由于 MIME 类型 (“text/html”) 不匹配 (X-Content-Type-Options: nosniff)，来自“http://localhost:3000/script.js”的资源被阻止
【发布时间】：2021-01-27 13:20:53
【问题描述】：

我正在尝试将所有 JavaScript 转移到一个单独的 js 文件中，然后像通常的做法一样将该 js 文件添加到 html 中。但是控制台显示以下错误-

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

我已经在 Nodejs 和 express 中构建了一个 socket.io 基本聊天应用程序，它可以在 http 服务器上运行。

const { Socket } = require("dgram");

const express = require('express');
const app = express();
const http = require("http").Server(app);
const io = require("socket.io")(http);


app.use(express.static('public'));

app.get("/", (req, res, next) => {
  //res.setHeader('content-type','application/javascript')
  res.sendFile(__dirname + "/index.html");
}); 

var user = "";

io.on("connection", (socket) => {
  socket.on('userName', (person) => {
      user = person;
      console.log(person + " connected");
  });
  
  socket.on('chat message', (data) => {
    //console.log('message: ' + msg);
    io.emit('chat message',{user: data.sending_user,message: data.message});
  });
  socket.on('disconnect', () => {
     console.log(user+" disconnected");
  });
});

http.listen(3000, () => {
  console.log("listening on *:3000");
});

客户端 html 代码 -

<!DOCTYPE html>
<html>

<head>
    <title>Chat</title>
    <script src="/socket.io/socket.io.js"></script>
    <script type="application/javascript" src="/main.js" ></script>
    <style>
        body {
            margin: 0;
            padding-bottom: 3rem;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        }

        #form {
            background: rgba(0, 0, 0, 0.15);
            padding: 0.25rem;
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            display: flex;
            height: 3rem;
            box-sizing: border-box;
            backdrop-filter: blur(10px);
        }

        #input {
            border: none;
            padding: 0 1rem;
            flex-grow: 1;
            border-radius: 2rem;
            margin: 0.25rem;
        }

        #input:focus {
            outline: none;
        }

        #form>button {
            background: #333;
            border: none;
            padding: 0 1rem;
            margin: 0.25rem;
            border-radius: 3px;
            outline: none;
            color: #fff;
        }

        #messages {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        #messages>li {
            
        }
        #messages .userName {
            font-size: 0.7em;
            padding-top: -0.5em;
            color:darkslateblue;
        }

        
    </style>

    
</head>

<body onload="myFunction()">
    <ul id="messages"></ul>
    <form id="form" action="">
        <input id="input" autocomplete="off" /><button>Send</button>
    </form>
    
    
</body>

</html>

html 文件的 main.js javascript-

var user;

var socket = io();

function myFunction() {
  var person = prompt("Please enter your name:");
  user = person;
  console.log(person + " from html");
  socket.emit("userName", person);
}

var form = document.getElementById("form");
var input = document.getElementById("input");

form.addEventListener("submit", function (e) {
  e.preventDefault();
  if (input.value) {
    socket.emit("chat message", { sending_user: user, message: input.value });
    input.value = "";
  }
});
socket.on("chat message", function (data) {
  var item = document.createElement("li");
  var name = document.createElement("li");
  name.setAttribute("class", "userName");
  name.textContent = data.user;
  item.textContent = data.message;
  messages.appendChild(name);
  messages.appendChild(item);

  window.scrollTo(0, document.body.scrollHeight);
});

module.exports = 'main.js';

我猜测通过服务器提供 js 文件存在一些问题，是否必须在某处明确指定内容类型？我在类似的 github 项目中找到的其他代码中没有发现任何额外的步骤。

【问题讨论】：

标签： javascript html node.js express socket.io

【解决方案1】：

我阅读了很多类似问题的答案及其不同的解决方案。最后我弄清楚了真正的问题是什么——路径不正确，文件没有被提供，因此 404 以某种方式导致了上述错误。

通过静态提供所有样式和脚本文件并设置相对于该位置的路径可以解决错误

const path = require('path');
const express = require('express');
const app = express();
app.use(express.static(path.join(__dirname, 'public')));

html文件中的脚本标签-

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

【讨论】：