Menolak untuk menerapkan gaya dari 'http: // localhost: 3000 / style.css' karena jenis MIME-nya ('text / html') [ditutup]
Saya mengalami kesalahan ini saat menjalankan aplikasi JS server klien saya
KESALAHAN KONSOL DI 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.
KODE KLIEN:
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});
KODE SERVER:
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)
}
FILE 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>
Bisakah Anda memberikan beberapa tautan, saran, atau petunjuk yang akan membantu mengarahkan saya menuju solusi?
Yang aneh adalah saya tidak memiliki file css.
Harap dicatat bahwa saya telah melalui posting ini dan itu tidak membantu kasus saya: Konsol Chrome error: Menolak untuk menerapkan gaya karena jenis MIME-nya ('text / html')
Jawaban
Anda telah menentukan:
<link rel="stylesheet" href="style.css">
Tetapi Anda tidak memiliki file style.css . Permintaan untuk http://localhost:3000/style.cssmenghasilkan kesalahan 404, dan server Anda memberikan tanggapan HTML (mimetype adalah text/html). Kesalahan mengatakan itu semua:
Menolak untuk menerapkan gaya dari '
http://localhost:3000/style.css' karena jenis MIME-nya ('text / html') bukan jenis MIME stylesheet yang didukung, dan pemeriksaan MIME yang ketat diaktifkan.
Untuk memperbaiki masalah ini, tautkan ke style.css sebenarnya dengan URL lengkap, atau hapus tautan stylesheet seluruhnya jika tidak ada sumber daya style.css seperti itu di mana pun.
Anda perlu memberi tahu aplikasi ekspres Anda secara eksplisit untuk menganggap folder itu statis untuk mempertahankan jenis mime file tersebut.
Sesuatu seperti:
app.use(express.static("./"));