'http：// localhost：3000 / style.css'のMIMEタイプ（ 'text / html'）[closed]のため、スタイルの適用を拒否しました
Dec 20 2020
クライアントサーバー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ファイルを持っていません。
私はすでにこの投稿を読んでいて、それは私のケースを助けていないことに注意してください：Chromeのコンソールエラー：MIMEタイプ（ 'text / html'）のためにスタイルの適用を拒否しました
回答
1 Wyck Dec 20 2020 at 08:15
指定しました：
<link rel="stylesheet" href="style.css">
しかし、style.cssファイルはありません。のリクエストによりhttp://localhost:3000/style.css404エラーが発生し、サーバーがHTML応答を提供しました（mimetypeはtext/html）。エラーはそれをすべて言います：
http://localhost:3000/style.cssMIMEタイプ（ 'text / html'）がサポートされているスタイルシートMIMEタイプではなく、厳密なMIMEチェックが有効になっているため、' 'からのスタイルの適用を拒否しました。
この問題を修正するには、完全なURLを使用して実際のstyle.cssにリンクするか、そのようなstyle.cssリソースがどこにも存在しない場合はスタイルシートリンクを完全に削除します。
Zahid Dec 20 2020 at 08:21
ファイルのmimeタイプを保持するには、フォルダーを静的と見なすようにExpressアプリに明示的に指示する必要があります。
何かのようなもの：
app.use(express.static("./"));