Node.js X-Content-Type-Options在Heroku上用节点阻止CSS_Node.js_Express_Vue.js_Heroku

Node.js X-Content-Type-Options在Heroku上用节点阻止CSS

node.js express vue.js heroku

Node.js X-Content-Type-Options在Heroku上用节点阻止CSS,node.js,express,vue.js,heroku,Node.js,Express,Vue.js,Heroku,我正在尝试将Node.js应用程序部署到Heroku。应用程序的前端是用Vue.js编写的。Vue生成输出位于节点应用程序的/public下。当从localhost启动时，它工作正常，可以作为https://localhost:8080/public 当然，赫罗库身上没有。X-Content-Type-Options标题是由服务器设置的，服务器会阻止所有CSS和JS文件，我在Chrome中收到这个错误消息： Refused to apply style from 'https://my-awes

我正在尝试将Node.js应用程序部署到Heroku。应用程序的前端是用Vue.js编写的。Vue生成输出位于节点应用程序的

/public

下。当从

localhost

启动时，它工作正常，可以作为

https://localhost:8080/public

当然，赫罗库身上没有。

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>

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

/public

，

/public/

，

public/

，

public

等工作

是否必须在Vue中设置基本URL？它当前是

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

你收到这个问题是因为服务器没有用css响应，它很可能是html，更准确地说是404页，浏览器实际识别为

文本/html

以下是可能的修复方法：

检查您的vue应用程序是否使用所有js和css文件构建（您可能错过了vue应用程序的构建步骤）
使用heroku run bash在生成文件后检查它们
使用
```
/
```
url提供静态文件，但也不要让其他路径无法访问，如：
```
app.get（'/api/'，…）
app.use（'/public'，express.static（path.join（\uu dirname，'public'））
```
确保静态设置是最后一个设置
尝试直接访问broswer中的javascript和css URL，以查看服务器如何响应

您之所以收到此消息，是因为服务器不响应css，它很可能是html，更准确地说是404页，浏览器实际将其标识为
文本/html
以下是可能的修复方法：

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

使用heroku run bash在生成文件后检查它们

使用
/
url提供静态文件，但也不要让其他路径无法访问，如：

app.get（'/api/'，…） app.use（'/public'，express.static（path.join（\uu dirname，'public'））
确保静态设置是最后一个设置

尝试直接访问broswer中的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将添加它
如果您愿意，这里有一个逐步编写的文件：
问题不是后端而是前端
事实上，问题在于链接路径。当Vue生成它们时，它假设应用程序将位于其自己的根目录中，因此所有资产都将位于
/
下。但是他们被置于
/public
之下。因此，当Express试图提供静态文件时，
index.html
的位置是正确的，但它试图在
/CSS
下查找CSS和其他资产，而不是
/public/CSS
。出于某种原因，这并没有导致404错误，而是导致MIME类型不匹配
解决方案是在Vue中更改公共路径。在项目根目录中创建
vue.config.js
文件并添加：

module.exports = { publicPath: "/public/" }
现在，资产链接将生成为
/public/css
，前端将工作
请注意，
/
不起作用，因为Vue不会添加它，而是完全忽略路径。尾随斜杠不重要，如果不重要，Vue将添加它
如果您愿意，这里有一个逐步编写的文件：
谢谢，这完全正确，但问题是由前端引起的。请看我的答案。谢谢，这一切都是正确的，但问题是由前端引起的。看看我的答案。