Отказался от применения стиля из 'http: // localhost: 3000 / style.css' из-за его MIME-типа ('text / html') [закрыто]

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.cssпривел к ошибке 404, и ваш сервер предоставил ответ HTML (тип mime text/html). Ошибка говорит сама за себя:

Отказался от применения стиля из " http://localhost:3000/style.css", поскольку его тип MIME ('text / html') не является поддерживаемым типом MIME таблицы стилей, и включена строгая проверка MIME.

Чтобы решить эту проблему, либо укажите ссылку на фактический style.css с полным URL-адресом, либо полностью удалите ссылку на таблицу стилей, если такой ресурс style.css нигде не существует.

Zahid Dec 20 2020 at 08:21

Вам нужно будет явно указать вашему экспресс-приложению рассматривать папку как статическую, чтобы сохранить MIME-тип файла.