“socket.io.js”由于 MIME 类型而被阻止

Question

我正在尝试学习 Socket.io，但我无法制作一个有效的项目，因为我制作的每个项目都有一个 MIME 类型不匹配。

错误： 由于 MIME 类型（“text/html”）不匹配（X-Content-Type-Options: nosniff），来自“http://localhost:5500/socket.io/socket.io.js”的资源被阻止。

为了测试这一点，我从 Github 找到了一个可以工作的聊天应用程序项目，并测试了该代码并遇到了同样的问题。该代码可以在以下位置找到：https://github.com/bradtraversy/chatcord

代码似乎正确地创建了一个 socket.io 实例：

const app = express();
const server = http.createServer(app);
const io = socketio(server);

// Set static folder
app.use(express.static(path.join(__dirname, 'public')));

...

const PORT = process.env.PORT || 3000;

server.listen(PORT, () => console.log(`Server running on port ${PORT}`));

HTML将JS与线连接起来：

<script src="/socket.io/socket.io.js"></script>

此 MIME 类型消息后跟有关客户端代码的“io is not defined”错误：

const socket = io();

这种 MIME 类型出现在 Firefox 上，但不在 Chrome 上，它不会而且只会给出 404 未找到。我不知道这是否只是浏览器的差异。

Answer 1

实际上，浏览器无法下载http://localhost:5500/socket.io/socket.io.js处的javascript文件。因此，io() 方法未定义。

您可以尝试从 CDN 加载文件，如 documentation 中所述。替换

<script src="/socket.io/socket.io.js"></script>

作者：

<script src="https://cdn.socket.io/3.1.3/socket.io.min.js" integrity="sha384-cPwlPLvBTa3sKAgddT6krw0cJat7egBga3DJepJyrLl4Q9/5WLra3rrnMcyTyOnh" crossorigin="anonymous"></script>

---

编辑： 我试图重现你的问题，但我不能。所以，我提供了我的环境的最大信息供您重现结果：

• 我使用存储库chatcord（克隆并运行npm run dev）
• 我的服务器在 3000 端口上运行。
• 我的节点版本：v14.17.0
• 我的 npm 版本：v7.13.0
• 我的系统：Windows 10

该项目无需任何修改即可运行。当我尝试使用 CDN 中的 socket.io 时，我需要在服务器端使用与已安装模块相同的版本（^2.0.4 基于package.json）