拒绝应用来自“http://localhost:3000/style.css”的样式，因为它的 MIME 类型（“text/html”）[关闭]答案

【问题标题】：Refused to apply style from 'http://localhost:3000/style.css' because its MIME type ('text/html') [closed]拒绝应用来自“http://localhost:3000/style.css”的样式，因为它的 MIME 类型（“text/html”）[关闭]
【发布时间】：2021-03-30 05:02:39
【问题描述】：

我在运行客户端服务器 JS 应用程序时遇到此错误

DevTools 中的控制台错误：

Refused to apply style from 'http://localhost:3000/style.css' because its MIME type 
('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

客户代码：

const postData = async ( url = '', data = {})=>{
console.log(data);
const response = await fetch(url, {
  method: 'POST', 
  credentials: 'same-origin',
  headers: {
      'Content-Type': 'application/json',
  },
 // Body data type must match "Content-Type" header        
  body: JSON.stringify(data), 
});

  try {
    const newData = await response.json();
    console.log(newData);
    return newData;
  }catch(error) {
  console.log("error", error);
  }
 }

postData('/addMovie', {answer:42});

服务器代码：

const express = require('express')
const bodyParser = require('body-parser');
const app = express()

app.use(bodyParser.urlencoded({extended : false}));
app.use(bodyParser.json());

const cors = require('cors');
app.use(cors());
app.use(express.static('website'))

const port = 3000
app.listen(port, getServerPortInfo)
function getServerPortInfo() {
    console.log("Server listening at port " + port)
}

const data = []
app.post('/addMovie', addMovie)

function addMovie (req, res){
    console.log(req.body)
    console.log("here")
    data.push(req.body)
    console.log(data)
    res.send(data)

 }

HTML 文件：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Weather Journal</title>
    <link href="https://fonts.googleapis.com/css?family=Oswald:400,600,700|Ranga:400,700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="style.css">
</head>
<body>    
    <div>
        <button id="generate" type = "submit"> Generate </button>
    </div>
    <script src="app.js" type="text/javascript"></script>
</body>
</html>

您能否提供一些链接、建议或指针来帮助我找到解决方案？

奇怪的是我没有css文件。

请注意，我已经阅读了这篇文章，但对我的情况没有帮助： The console of Chrome error : Refused to apply style because its MIME type ('text/html')

【问题讨论】：

您能否也检查一下this question 是否相关？在那里，css 提取实际上会导致 404。您是否检查了浏览器内的开发人员工具（网络选项卡）以查看资源实际上是否正确提取？
等等……刚刚做了两遍。你说 奇怪的是我没有 css 文件。 但你显然用<link rel="stylesheet" href="style.css"> 链接到一个，那是怎么回事？如果您知道没有 css 文件，但您正在尝试获取一个，那么您应该知道 404 即将到来。我误解了你的评论吗？
这是来自 google 的 CSS，虽然它不是本地的。应该没有问题吧？
不，不是。那是一条与资源相关的路径。如果您在http://localhost:3000/ 托管，那么style.css 就是http://localhost:3000/style.css。特别是不是将从 google.com 获取的内容您需要指定托管 style.css 资源的完整 url。
啊，非常感谢。解决了它

标签： javascript html jquery node.js http-post

【解决方案1】：

您需要明确告诉您的 express 应用将文件夹视为静态文件夹以保留文件的 mime 类型。

类似：

app.use(express.static("./"));

【讨论】：

【解决方案2】：

您已指定：

<link rel="stylesheet" href="style.css">

但是您没有 style.css 文件。 http://localhost:3000/style.css 的请求导致 404 错误，并且您的服务器提供了 HTML 响应（mimetype 为 text/html）。错误说明了一切：

拒绝应用来自“http://localhost:3000/style.css”的样式，因为它的 MIME 类型 ('text/html') 不是受支持的样式表 MIME 类型，并启用了严格的 MIME 检查。

要纠正这个问题，要么使用完整的 URL 链接到实际的 style.css，或者如果任何地方都不存在这样的 style.css 资源，则完全删除样式表链接.

【讨论】：