[英]X-Content-Type-Options blocking CSS with Node on Heroku
我正在尝试将 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? 目前是/
。
是的,我知道有很多关于此的问题,但没有有效的答案。
您收到此消息是因为服务器没有响应 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 以查看服务器如何响应
结果证明问题不是后端而是前端问题。
事实上,问题出在链接路径上。 当 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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.