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

【问题标题】：X-Content-Type-Options blocking CSS with Node on HerokuX-Content-Type-Options 在 Heroku 上使用 Node 阻止 CSS
【发布时间】：2021-01-19 07:50:13
【问题描述】：

我正在尝试将 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 等。

难道基础 URL 必须在 Vue 中设置？目前是/。

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

【问题讨论】：

标签： node.js express vue.js heroku

【解决方案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 以查看服务器如何响应

【讨论】：

谢谢，这都是正确的，但问题是由前端引起的。看我的回答。

【解决方案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

【讨论】：