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

Posted 2023-03-15

【中文标题】“socket.io.js”由于 MIME 类型而被阻止

【英文标题】："socket.io.js" was blocked due to MIME type

【发布时间】：2021-09-04 09:56:41

【问题描述】：

我正在尝试学习 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 未找到。我不知道这是否只是浏览器的差异。

【问题讨论】：

我检查了您的存储库，运行了代码，但无法重现问题。错误没有发生，URL解析为一些JS。可能是你编辑完代码忘记重启服务器了，可能需要清除浏览器缓存。

【参考方案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）

【讨论】：

这听起来是问题的正确根源，但它并不包含真正的解决方案，而是一种避免策略；-) 问题是正确的：为什么浏览器不加载 io来自socket.io.js ?

是的，我去了文档页面，上面写着By default, the Socket.IO server exposes a client bundle at /socket.io/socket.io.js.。老实说，我找不到为什么它在问题中的信息在这里不起作用。因此，我尝试提供一种替代解决方案（也来自文档:)）

切换到使用 CDN（或直接复制 CDN 文件）会导致每隔几秒重复一次失败的 GET 请求：GET 127.0.0.1:5500/socket.io/… [HTTP/1.1 404 Not Found 2ms]

它试图连接到服务器但它不能。您是否使用存储库 chatcord 对其进行了测试？

是的，这是我测试过的那个