Recurso interpretado como folha de estilo, mas transferido com o tipo MIME text / html (parece não estar relacionado ao servidor da web)

Eu tenho esse problema O Chrome continua retornando esse erro

Recurso interpretado como folha de estilo, mas transferido com o tipo MIME text / html

Os arquivos afetados por esse erro são apenas o estilo, escolhido e jquery-gentleselect (outros arquivos CSS importados no índice da mesma maneira funcionam bem e sem erros). Eu já verifiquei meu tipo MIME e o texto / css já está em CSS.

Honestamente, eu gostaria de começar entendendo o problema (algo que parece que não posso fazer sozinho).

eu gostaria de começar entendendo o problema

Navegadores fazem solicitações HTTP para servidores. O servidor faz uma resposta HTTP.

As solicitações e as respostas consistem em vários cabeçalhos e um corpo (às vezes opcional) com algum conteúdo.

Se houver um corpo, um dos cabeçalhos é o Content-Type que descreve o que é o corpo (é um documento HTML? Uma imagem? O conteúdo de um envio de formulário? Etc).

Quando você solicita sua folha de estilo, seu servidor informa ao navegador que é um documento HTML (Content-Type: text/html ) em vez de uma folha de estilo ( Content-Type: text/css).

Eu já verifiquei meu myme.type e text / css já está em css.

Outra coisa sobre o servidor está fazendo com que a folha de estilo seja do tipo de conteúdo errado.

Use a guia Net das ferramentas de desenvolvedor do seu navegador para examinar a solicitação e a resposta.

Usando Angular?

Esta é uma ressalva muito importante para lembrar.

A tag base precisa não apenas estar na cabeça, mas no local certo.

Eu tinha minha tag base no lugar errado na cabeça, ela deve vir antes de qualquer tag com solicitações de URL. Basicamente, colocá-lo como a segunda tag abaixo do título resolveu isso para mim.

<base href="/">

Eu escrevi um pequeno post aqui

Eu também tive problemas com esse erro e encontrei uma solução. Isso não explica por que o erro ocorreu, mas parece corrigi-lo em alguns casos.

Inclua uma barra / antes do caminho para o arquivo css, da seguinte maneira:

<link rel="stylesheet" href="https://stackoverflow.com/css/bootstrap.min.css">

Meu problema foi mais simples do que todas as respostas deste post.

Eu tive que configurar o IIS para incluir conteúdo estático.

Tente isto <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

onde ##está sua pasta onde está seu arquivo .CSS

Não se esqueça do: ..(pontos duplos).

Definir as credenciais de autenticação anônima como identidade do pool de aplicativos fez o truque para mim.

Eu também estava enfrentando o mesmo problema. E depois de fazer algumas pesquisas e desenvolvimento, descobri que o problema estava no nome do arquivo. O nome do arquivo real era "lightgallery.css", mas durante a vinculação digitei "lightGallery.css" .

Mais informações:

Funcionou bem no meu host local (SO: Windows 8.1 e Server: Apache). Mas quando carreguei meu aplicativo em um servidor remoto (sistema operacional e servidor da Web diferente do meu host local), ele não funcionou, causando o mesmo erro que o seu.

Portanto, o problema era a distinção entre maiúsculas e minúsculas (com relação aos nomes de arquivos) do servidor.

Com base nas outras respostas, parece que essa mensagem tem várias causas, pensei em compartilhar minha solução individual caso alguém tenha o meu problema exato no futuro.

Nosso site carrega os arquivos CSS de uma distribuição do AWS Cloudfront, que usa um bucket S3 como origem. Esse bucket S3 específico foi mantido sincronizado com um servidor Linux executando o Jenkins. O synccomando via s3cmddefine o tipo de conteúdo para o objeto S3 automaticamente com base no que o sistema operacional diz (presumivelmente com base na extensão do arquivo). Por alguma razão, em nosso servidor, todos os tipos estavam sendo definidos corretamente, exceto os .cssarquivos, que ele forneceu ao tipo text/plain. No S3, quando você verifica os metadados nas propriedades de um arquivo, pode definir o tipo para o que quiser. Configurá-lo para text/csspermitir que nosso site interprete corretamente os arquivos como CSS e carregue corretamente.

Caso você sirva css estático com nginx, adicione

location ~ \.css {
    add_header  Content-Type    text/css;
}
location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

ou

location ~ \.css{
    default_type text/css;
}
location ~ \.js{
    default_type application/x-javascript;
}

para nginx conf

A resposta de @Rob Sedgwick me deu um indicador, no entanto, no meu caso, meu aplicativo era um Aplicativo de Inicialização de Primavera . Acabei de adicionar exclusões no meu Config de segurança para os caminhos para os arquivos em questão ...

NOTA - Esta solução é baseada no SpringBoot ... O que você pode precisar fazer pode variar com base na linguagem de programação que você está usando e / ou na estrutura que está utilizando

No entanto, o ponto a ser observado é;

Essencialmente, o problema pode ser causado quando todas as solicitações, incluindo aquelas para conteúdo estático, estão sendo autenticadas.

Então, digamos que alguns caminhos para o meu conteúdo estático que estavam causando os erros são os seguintes;

Um caminho chamado "plugins"

http: // localhost: 8080 / plugins / styles / css / file-1.css

http: // localhost: 8080 / plugins / styles / css / file-2.css

http: // localhost: 8080 / plugins / js / script-file.js

E um caminho chamado "páginas"

http: // localhost: 8080 / pages / styles / css / style-1.css

http: // localhost: 8080 / pages / styles / css / style-2.css

http: // localhost: 8080 / pages / js / scripts.js

Depois, apenas adiciono as exclusões da seguinte forma no meu Spring Boot Security Config;

@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.authorizeRequests()
            .antMatchers(<comma separated list of other permitted paths>, "/plugins/**", "/pages/**").permitAll()
            // other antMatchers can follow here
    }

}

Felicidades!

Usando Angular

No meu caso, usar em ng-hrefvez de hrefresolver para mim.

Nota :

Estou trabalhando com o laravel como back-end

Eu estava enfrentando a mesma coisa, com o mesmo arquivo .htaccess para criar URLs bonitas. depois de algumas horas olhando e experimentando. Eu descobri que o erro foi devido a arquivos de ligação relativamente.

o navegador começará a buscar o mesmo arquivo html de origem para todos os arquivos css, js e de imagem, quando eu procuraria algumas etapas no servidor.

para combater isso, você pode usar a <base>tag na sua fonte html,

<base href="http://localhost/assets/">

e link para arquivos como,

<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="js/script.js"></script>

ou use links absolutos para todos os seus arquivos.

<link rel="stylesheet" type="text/css" href="http://localhost/assets/css/style.css" />
<script src="http://localhost/assets/js/script.js"></script>
<img src="http://localhost/assets/images/logo.png" />

Se você estiver no JSP, esse problema pode vir do seu mapeamento de servlet. se o seu mapeamento usa url por padrão como este:

@WebServlet("/")

o contêiner interpreta seu URL css e vai para o servlet em vez de ir para o arquivo css.

eu tive o mesmo problema, mudei meu mapeamento e agora tudo funciona

Eu tenho um problema semelhante no MVC4 usando autenticação de formulários. O problema foi esta linha no web.config,

<modules runAllManagedModulesForAllRequests="true">

Isso significa que todas as solicitações, incluindo aquelas para conteúdo estático, estão sendo autenticadas.

Mude esta linha para:

<modules runAllManagedModulesForAllRequests="false">

Também enfrento esse problema recentemente no chrome . Eu apenas dou caminho absoluto para o meu arquivo CSS resolver.

<link rel="stylesheet" href="<?=SS_URL?>arica/style.css" type="text/css" />

Quero expandir o argumento de Todd R no OP. Nas páginas asp.net, o web.configarquivo define as permissões necessárias para acessar cada arquivo ou pasta no aplicativo. No nosso caso, a pasta de arquivos CSS não permitia o acesso a usuários não autorizados, causando falha na página de login antes da autorização do usuário. A alteração das permissões necessárias em web.configusuários não autorizados permitiu acessar os arquivos CSS e resolveu esse problema.

Caso alguém venha a este post e tenha um problema semelhante. Acabei de experimentar um problema semelhante, mas a solução era bastante simples.

Um desenvolvedor, por engano, soltou uma cópia do web.config no diretório CSS. Uma vez excluídos, todos os erros foram resolvidos e a página exibida corretamente.

Me deparei com o mesmo problema ao retomar o trabalho em um projeto antigo de pilha do MEAN. Eu estava usando nodemoncomo meu servidor de desenvolvimento local e recebi o mesmo erro Resource interpreted as stylesheet but transferred with MIME type text/html. Eu mudei nodemonpara o http-serverque pode ser encontrado aqui . Imediatamente funcionou para mim.

É porque você deve ter definido o tipo de conteúdo como text / html em vez de text / css para a sua página do servidor (php, node.js etc.)

Isso ocorreu quando eu removi o protocolo do link css para uma folha de estilo css servida por uma CDN do google.

Isso não dá erro:

<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">

Mas isso fornece o erro Recurso interpretado como Folha de estilo, mas transferido com o tipo MIME text / html :

<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">

Eu estava enfrentando um problema semelhante. E explorando soluções nesta fantástica página Stack Overflow.

A resposta do usuário54861 ​​(nomes incompatíveis na sensibilidade das maiúsculas e minúsculas) me deixa curioso para inspecionar meu código novamente e percebi que " Eu não carreguei dois arquivos js que os carreguei na tag head ". :-)

Quando os enviei, o problema desapareceu! E o código é executado e a página é renderizada sem nenhum outro erro!

Portanto, a moral da história é não se esqueça de garantir que todos os seus arquivos js sejam enviados para onde a página os procura.

Me deparei com o mesmo problema com um aplicativo .NET, um código-fonte aberto do CMS chamado MojoPortal. Em um dos meus temas e skin para um site específico, ao navegar ou testar, ele triturava e desacelerava como se estivesse sufocando.

Meu problema não era do atributo "type" para o CSS, mas era "essa outra coisa". Minha alteração exata foi no Web.Config . Alterei todos os valores para FALSE para MinifyCSS, CacheCssOnserver e CacheCSSinBrowser.

Uma vez definido, o site ficou mais rápido na produção.

Tive o mesmo erro porque esqueci de enviar um cabeçalho correto pela primeira vez

header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';

Usando ReactJs, quando adiciono um arquivo de estilo ao index.html usando um link relativo, como

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

e então eu navego para uma rota, digamos; localhost:3000/artiste atualizar, recebo o erro.

O erro desapareceu depois que substituí o link relativo por um link absoluto, digamos;

<link rel="stylesheet" href="http://localhost/project/public/css/style.css".

Encontrei esse problema ao carregar o CSS para um módulo de layout do React que eu instalei com o npm. Você precisa importar dois arquivos .css para que esse módulo seja executado, então eu os importei inicialmente assim:

@import "../../../../node_modules/react-grid-layout/css/styles.css";

mas descobrimos que a extensão do arquivo precisa ser descartada, então isso funcionou:

@import "../../../../node_modules/react-grid-layout/css/styles";

Se nodejs e using express, o código abaixo funciona ...

res.set('Content-Type', 'text/css');

Eu tenho o mesmo problema exato e, depois de alguns minutos, decifrei que perdi para adicionar a extensão do arquivo ao meu cabeçalho. então mudei a seguinte linha:

<link uic-remove rel="stylesheet" href="css/bahblahblah">

para

<link uic-remove rel="stylesheet" href="css/bahblahblah.css"> 

Comecei a obter o problema hoje apenas no chrome e não no safari para o mesmo projeto / URL do meu contêiner de goormide (node.js)

Depois de tentar várias sugestões acima, que não pareciam funcionar e voltar atrás em algumas alterações de código que fiz de ontem a hoje, que também não fizeram diferença, acabei clicando nas configurações do Chrome:

1. Configurações;

2. role para baixo, selecione: "Avançado";

3. role para baixo, selecione: "Restaurar as configurações com os padrões originais";

Isso parece ter resolvido o problema, já que não recebo mais o aviso / erro no console e a página é exibida como deveria. Ao ler as postagens acima, parece que o problema pode ocorrer em qualquer número de fontes, portanto, a redefinição das configurações é uma possível correção genérica. Felicidades

Se você estiver servindo o aplicativo no prod, verifique se está servindo os arquivos estáticos com o técnico de serviço. Eu tive esse erro quando estava servindo apenas a subpasta estática do React build no Django (sem ativos com estilos)

Usando React

Me deparei com esse erro no meu aplicativo de perfil de reação. Meu aplicativo se comportou como se estivesse tentando fazer referência a um URL que não existe. Acredito que isso tenha algo a ver com o comportamento do webpack.

Se você estiver vinculando arquivos em sua pasta pública, lembre-se de usar% PUBLIC_URL% antes do recurso como este:

<link type="text/css" rel="stylesheet" href="%PUBLIC_URL%/bootstrap.min.css" />