X-Content-Type-Options 在 Heroku 上使用 Node 阻止 CSS

Question

我正在尝试将 Node.js 应用程序部署到 Heroku。 应用程序的前端是用 Vue.js 编写的。 Vue 构建输出位于 Node 应用程序中的/public下。 它在从localhost启动时完美运行，并且可以作为https://localhost:8080/public 。

当然，它不在 Heroku 上。 X-Content-Type-Options标头由他们的服务器设置，它会阻止所有 CSS 和 JS 文件，我在 Chrome 中收到此错误消息：

Refused to apply style from 'https://my-awesome-app.herokuapp.com/css/app.5364ed87.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

我对我的静态文件进行了一些修改，发现出了什么问题。 在生产构建index.html包含这样的链接：

<link href=/js/chunk-109f12d9.3bbd3c2d.js rel=prefetch>
<link href=/js/chunk-2d0bae5c.0ec2a734.js rel=prefetch>
<link href=/js/chunk-2d0f1192.aa2d5399.js rel=prefetch>
<link href=/js/chunk-f8fb7b5a.9218edff.js rel=prefetch>
<link href=/css/app.5364ed87.css rel=preload as=style>
<link href=/js/app.af503387.js rel=preload as=script>
<link href=/js/chunk-vendors.aa1329d3.js rel=preload as=script>
<link href=/css/app.5364ed87.css rel=stylesheet>

我发现如果我从href属性中删除开头的斜杠，链接会突然开始工作。 所以css/whatever.css作品， /css/whatever.css没有。

我怀疑我在 Express 设置中启用静态目录的方式有问题。 但我想不通是什么。 你有什么主意吗？

const publicPath = path.join(__dirname, 'public');
this.express.use('/public', express.static(publicPath));

在任何地方添加斜杠或删除它都无济于事。 我已经尝试了所有可能的组合。 它不能用作/public 、 /public/ 、 public/ 、 public等。

是不是必须在Vue中设置基本URL？ 目前是/ 。

是的，我知道有很多关于此的问题，但没有有效的答案。

Answer 1

您收到此消息是因为服务器没有响应 css，它很可能是html ，更准确地说是浏览器实际识别为text/html的 404 页面。

以下是可能的修复方法：

• 检查您的 vue 应用程序是否实际上是使用所有 js 和 css 文件构建的（您可能错过了 vue 应用程序的构建步骤）

• 使用heroku run bash在文件构建后检查它们

• 使用/ url 提供静态文件，但也不要让其他路由无法到达，如下所示：

   app.get('/api/', ......) app.use('/public', express.static(path.join(__dirname, 'public')))

  确保静态设置是最后一个。

• 尝试直接在您的浏览器中访问 javascript 和 css url 以查看服务器如何响应

Answer 2

结果证明问题不是后端而是前端问题。

事实上，问题出在链接路径上。 当 Vue 生成它们时，它假定应用程序将位于其自己目录的根目录中，因此所有资产都将位于/下。 但他们在/public下。 因此，当 Express 尝试提供静态文件时， index.html位于正确的位置，但它试图在/css下查找 CSS 和其他资产，而不是/public/css 。 出于某种原因，这不会导致 404 错误，而是导致 MIME 类型不匹配。

解决办法是更改Vue中的公共路径。 在项目根目录创建一个vue.config.js文件并添加：

module.exports = {
  publicPath: "/public/"
}

现在资产链接将生成为/public/css并且前端将工作。

请注意./不起作用，因为 Vue 不会添加它而是完全省略路径。 尾部斜杠并不重要，如果你不重要，Vue 会添加它。

如果您愿意，这里有一个分步说明： https : //medium.com/developer-rants/why-is-strict-mime-type-checking-blocking-the-static-serving-of-vue-frontend-files- 4cbea1eedbd1