解决 Refused to execute script from "**" is not executable, and strict MIME type checking is enabled.

引言

在前端项目部署到生产环境后，我们可能会遇到页面空白的问题，而浏览器控制台中出现的错误提示往往是关键线索。本文将详细解析一个常见的错误提示：Refused to execute script from "**" is not executable, and strict MIME type checking is enabled.，并提供解决方案。

错误解析

这个错误通常发生在浏览器尝试执行一个脚本，但服务器返回的 MIME 类型不符合预期时。在严格 MIME 类型检查启用的情况下，如果返回的 MIME 类型不是可执行的，浏览器将拒绝执行该脚本。

什么是MIME

MIME（Multipurpose Internet Mail Extensions，多用途互联网邮件扩展）是一种标准，用于定义不同类型数据（文本、图像、视频、音频等）在电子邮件和网页传输时的格式和编码方式。MIME 类型（或称为 MIME 类别）是一个字符串，用于告诉浏览器或邮件客户端如何处理接收到的数据。

MIME 类型由两部分组成，分别用斜杠（/）分隔：

1. 类型（Type）：表示数据的大致类别，例如 text、image、application 等。
2. 子类型（Subtype）：表示数据的具体格式，例如 html、jpeg、xml 等。

一些常见的 MIME 类型包括：

• text/html：HTML 文档。
• text/plain：纯文本文件。
• image/jpeg：JPEG 格式的图片。
• image/png：PNG 格式的图片。
• image/gif：GIF 格式的图片。
• application/json：JSON 数据。
• application/pdf：PDF 文档。
• application/javascript：JavaScript 代码（通常用于 .js 文件）。
• application/octet-stream：二进制文件，当具体类型未知时使用。

MIME 类型在 HTTP 协议中非常重要，因为它们被包含在响应头的 Content-Type 字段中，告诉客户端如何处理响应体中的数据。例如，当浏览器请求一个文件时，服务器会在 HTTP 响应中包含正确的 MIME 类型，这样浏览器就知道如何正确地渲染或处理文件。

MIME 类型也用于电子邮件中，以确保邮件客户端能够正确地显示不同类型的附件。此外，它们还用于文件上传和下载，确保数据以正确的格式传输。

常见原因

1. 服务器配置错误：服务器没有正确设置静态文件的 MIME 类型，导致返回了错误的类型，如将 .js 文件错误地识别为 text/html。
2. X-Content-Type-Options: nosniff：这是一个安全特性，用于防止 MIME 类型混淆攻击。当这个头部被设置时，浏览器会强制检查资源的 MIME 类型，如果不符合预期，就会阻止资源的加载。

解决方案

检查服务器配置

首先，检查你的服务器配置，确保正确设置了 MIME 类型。如果你使用的是 Express，可以通过以下方式设置静态文件服务，并确保正确的 MIME 类型被返回，参考express文档

const express = require('express');
const app = express();

// 设置静态文件目录
app.use(express.static('public'));

// 确保第三方模块 mime 类型正确识别
app.use((req, res, next) => {
  if (req.path.endsWith('.js')) {
    res.type('application/javascript; charset=utf-8');
  } else if (req.path.endsWith('.css')) {
    res.type('text/css; charset=utf-8');
  }
  next();
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

取消 X-Content-Type-Options: nosniff 配置

如果你的服务器设置了 X-Content-Type-Options: nosniff，你可以考虑取消这个配置，或者改为更宽松的设置。这可以通过修改服务器配置来实现，例如在 Nginx 中：

http {
  ...
  add_header X-Content-Type-Options "nosniff" always;
  ...
}

通过 HTTP 响应头设置 MIME 类型

另一种方法是在服务器端设置 HTTP 响应头，以确保正确的 MIME 类型被返回：

// 在服务器端设置响应头
response.setHeader('Content-Type', 'application/javascript');

总结

页面空白问题可能由多种原因引起，其中之一就是 MIME 类型错误。通过检查和调整服务器配置，确保正确的 MIME 类型被返回，可以解决这个问题。同时，理解 X-Content-Type-Options: nosniff 的影响，并适当调整，也是保障前端项目顺利部署的关键。