@Sviaznoi

MIME тип CSS при попытке добавить stylesheet в head через скрипт. Как решить проблему?

Здравствуйте. Я тут с сервером и браузером экспериментирую. В задумке подгружать стили ориентируясь на операционную систему. Т.е. линукс - десктопный stylesheet, андроид - мобильный и т.п. Но получая адрес и пытаясь вставить в элемент link получаю ошибку :
Refused to apply style from 'https://localhost:3000/css/desctop/main_d.css.css%22%3E' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Understand this errorAI


Вариации с innerHTML дают тот же результат. Вот коды всего:
браузер.

spoiler
"use strict"

async function getOS() {

    var userAgent = window.navigator.userAgent,
        platform = window.navigator.platform,
        macosPlatforms = ['Macintosh', 'MacIntel', 'MacPPC', 'Mac68K'],
        windowsPlatforms = ['Win32', 'Win64', 'Windows', 'WinCE'],
        iosPlatforms = ['iPhone', 'iPad', 'iPod'],
        os = null;
  
    if (macosPlatforms.indexOf(platform) !== -1) {
      os = 'pc';
    } else if (iosPlatforms.indexOf(platform) !== -1) {
      os = 'mobile';
    } else if (windowsPlatforms.indexOf(platform) !== -1) {
      os = 'pc';
    } else if (/Android/.test(userAgent)) {
      os = 'mobile';
    } else if (!os && /Linux/.test(platform)) {
      os = 'pc';
    }
    
    try{
        let response = await fetch("https://localhost:3000",{
            method: 'POST',
            headers: {
                'Content-Type': 'text/css'
            },
            body: os,
        });
        if(!response.ok){
            throw new error(`HTTPS error! status: ${response.status}`);
        }
        let stylesheet = await response.text();
       
        let link = document.createElement('link');
        link.rel = 'stylesheet';
        link.type = 'text/css';
        link.href = stylesheet;
        document.head.appendChild(link);
    } catch {
        console.error('Ошибка при получении данных', error);
    }    
  }
  
  getOS();


сервер.
spoiler

const https = require('https');
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');
const port = 3000;

 
app.use(express.static(__dirname));
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
app.use('/css', express.static(path.join(__dirname, 'css')));

app.get("/", (req, res) =>{
    res.sendFile(path.join(__dirname, 'index.html'));
});

app.post('/',(req,res) => {
    let base = 'main_d.css';    

    switch(req.body.os){
        case "pc":
            base = 'main_d.css';
            break;
        case "mobile":
            base = 'main_m.css';
            break;
    }
     
    res.send(`https://localhost:3000/css/desctop/${base}">`)
})

const options = {
    key: fs.readFileSync('server.key'),
    cert: fs.readFileSync('server.cert'), 
}

https.createServer(options, app).listen(port, function (req, res){
    console.log(`port ${port}`)
})<code lang="javascript">

</code></spoiler>

html.
<spoiler><code lang="html">
<spoiler title=""><code lang="html">
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>"Bubble"</title>
    <script src="scripts/start.js"></script>
    <!--<link rel="stylesheet" href="css/desctop/main_d.css"> -->
    <link rel="stylesheet" href="css/back-bubble.css">
</head>
<body>
    <div id="screen"></div>
    <div id="all">
        <header class="head">
            <div class="logo out"><h1>Bubble</h1></div>
            <h3>Самый пузыристый сайт на свете!!!</h3>
        </header>
        <div id="page">
            <nav>
                <button id="mainMenu" class="out">меню</button>
                <ul class="mainMenu">
                    <li class="out">lld</li>
                </ul>
            </nav>
            <main>
    
            </main>
            <aside>
                <button id="subMenu" class="out">Содержание</button>
            </aside>            
        </div>
        <footer>
            <div class="myGit">
                <a href="https://Svyazistvsa.github.io/rsschool-cv/">SvyazisT</a>               
            </div>
            <span class="date">.2024</span>         
        </footer>
    </div>
    <script src="scripts/animation_interface.js"></script>
    <script src="scripts/bubble-generator.js"></script>
</body>
</html>
</code></spoiler>

Подскажите пожалуйста как решить эту проблему.
  • Вопрос задан
  • 104 просмотра
Решения вопроса 1
Aetae
@Aetae Куратор тега JavaScript
Тлен
А почитать что тебе пишет, а посмотреть что ты пишешь?=\

Refused to apply style from 'https://localhost:3000/css/desctop/main_d.css.css%22%3E' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Understand this errorAI

'https://localhost:3000/css/desctop/main_d.css.css%22%3E'

main_d.css.css%22%3E


res.send(`https://localhost:3000/css/desctop/${base}">`)
`https://localhost:3000/css/desctop/${base}">`
${base}">
">


У тебя в ссылке лишний "> из-за чего ссылка ведёт никуда, из-за чего сервер возвращает 404 страницу, которая html.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@ImagineTables
>В задумке подгружать стили ориентируясь на операционную систему.

Оффтопик по отношению к этому конкретному вопросу, но, возможно, стоит рассмотреть переезд из браузера в ОС-специфичные webview-приложения и вынос разметки/стилей в ресурсы. По крайней мере, обычно обозначенная в цитате дорога приводит именно к этому )) А от сервера оставить только веб-АПИ.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы