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


191

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).


Você pode fornecer o URL desta folha de estilo?
Lister

Apenas no caso de alguém precisar disso. Isso estava acontecendo comigo devido à compactação do arquivo css. E de alguma forma, depois de dois tempos de compactação, um no local, um do meu provedor de CDN, o servidor não consegue mais reconhecê-lo.
Lyu

Isso aconteceu comigo quando uma solicitação de tag de folha de estilo estava sendo redirecionada no servidor devido a um problema de pedido do middleware (auth middleware antes da veiculação de arquivo estática). A mensagem de erro no console Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/login". login:1 Uncaught SyntaxError: Unexpected token <mostrava o URL da página redirecionada em vez da solicitação css original, o que dificultava a localização.
Vaughan

Eu também experimentei o que o @vaughan encontrou. Isso ocorreu porque a folha de estilo exigia autenticação. . . em uma página que estava tentando executar autenticação. Problema realmente difícil de solucionar, mas depois que você descobre, parece bastante óbvio.
Todd R

Muitas pessoas adicionaram soluções diferentes para esse problema em diferentes ambientes. Eu tive que rolar muito antes de encontrar o meu (Reactjs). Não desista se não encontrar o seu próximo ao topo, como é habitual no SO.
Juan Lanus

Respostas:


87

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.


4
eu acho que im certeza de que o problema está no meu .htaccess wich é pastebin.com/w8UnqFs8 (i esqueceu de mencionar que este erro está me dando apenas no subdiretório e só depois de uma atualização de página). Obrigado pela sua explicação, foi bastante útil para entender o problema. :)
Max

Certifique-se que você pode acessar o arquivo sem fazer o login.
Waqar

1
@ Max, por que você não coloca essa informação na pergunta real? :) #
10289 mrdd

102

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


2
usando em ng-hrefvez de hrefresolver para mim!
Peter Wilson

Eu estava recebendo o erro de análise do OTS: tag de versão inválida, mas encontrei isso ao procurar uma solução e, meu Deus, isso me salvou.
Patrick Graham

1
No meu caso, eu estava usando uma regra de reescrita .htaccess para alterar um diretório para uma variável de cadeia de caracteres de consulta, assim:RewriteRule ^my_dir/(.+)$ /new_dir/?my_var=$1 [L,QSA]
lincolnberryiii 25/11/18

Assim como Max, isso corrigiu meu problema, apesar de não estar usando o Angular. Coloquei o link / href incorreto primeiro, na frente de todos os outros links, na seção head - e o aviso desapareceu.

convém renomear seu título em seu artigo. Eu nem uso Angular. Estou usando Swift + Leaf e isso resolveu o meu problema.
rápida nub

40

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">


isso é relevante neste caso?
Gilles Gouaillardet 27/08/17

2
Perdi muito tempo com este pequeno erro. Se alguém ler minha resposta e ela o ajudar, será relevante neste caso.
Trilochan

2
O que realmente aconteceu é que o servidor /css/bootstrap.min.cssenviou o arquivo , mas quando você não incluiu o arquivo , /ele apenas aparece no diretório atual; por exemplo, se você acessou yoursite.com/hello/trilochan, ele procurará por baixo hello/css/bootsrap.min.css, mas está mesmo abaixo yoursite.com/css/bootsrap.min.css, espero ter limpado isso /se refere à raiz e /, sem , parece no diretório atual.
precisa

1
@GillesGouaillardet Foi muito relevante, eu tive o mesmo problema.
precisa

Eu recomendo a você o desenvolvedor do web bootcamp no udemy por colt steele, ele ajudará a esclarecer suas dúvidas.
precisa

17

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

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

insira a descrição da imagem aqui


10

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).


Eu adicionei pontos duplos e barra (../path_path). funcionou para mim. obrigado
Vidhya 15/05

Qual é a razão de adicionar esses dois..
Pardeep Jain

10

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

insira a descrição da imagem aqui


9

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.


Obrigado, estava quebrando a cabeça por causa de um erro de ortografia.
Nischal Kumar BC

7

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.


6

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


5

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
    }

}


A exclusão desses caminhos "/plugins/**"e "/pages/**"da autenticação fez com que os erros desaparecessem.


Felicidades!


@ Ben Rhys-Lewis ... Eu me pergunto por que você acha que essa é uma pergunta ou até parece uma. Talvez você queira ler minha resposta com atenção suficiente para ver que na verdade é uma RESPOSTA - infelizmente, que funcionou no meu caso ... e definitivamente NÃO é uma pergunta.
SourceVisor

Desculpe, minha culpa. Não tenho certeza de como isso aconteceu, eu fiz um boo-boo. Por favor aceite minhas desculpas.
Ben Rhys-Lewis


3

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" />

3

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


2

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">

2

insira a descrição da imagem aqui 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" />

Você deve estar brincando comigo. Dispensou esta solução três vezes. Cheguei nesta página várias vezes, mas depois de tentar tudo o mais e prestes a desistir, eu disse: "Parreira, o que poderia dar errado". Funcionou!!! Mistério da vida
Kermit_ice_tea

1

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.


0

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.


Obrigado @Rohit Gupta pela edição. Eu estava digitando mais rápido do que meu gerente interno de gramática processaria! =)
Hideous1

3
Esta é uma solução específica do ASP.NET, que não é parte óbvia da questão.
Dakab

@dakab e daí? Muitas das outras respostas também são específicas da estrutura e ajudaram as pessoas a usar as estruturas que estão enfrentando o mesmo problema.
jsabrooke

0

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.


0

É 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.)


1
este problema foi a respeito de um arquivo css, e não um html um
Max

0

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">

0

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.


Isso realmente não responde à pergunta. Se você tiver uma pergunta diferente, faça-a clicando em Fazer pergunta . Você também pode adicionar uma recompensa para chamar mais atenção para essa pergunta quando tiver reputação suficiente . - Da avaliação
Lemon Kazi

Não pode ser uma pista para os designers de scripts ecma adicionarem um erro ou exceção relevante ao javascript se o desenvolvedor não carregar o recurso no servidor? Quero dizer "O recurso interpretado como folha de estilo, mas transferido com o tipo MIME text / html" é um pouco confuso, não é?
Hossein Khalesi

0

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.


0

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; }';

0

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".


Eu tive esse problema no mesmo ambiente e tentei sua solução sem sorte. Mas você me mostrou um caminho de pesquisa :-) As mensagens desapareceram depois que eu mudei os arquivos CSS para a pasta pública. Uma vez que eu fiz, não havia necessidade dos caminhos absolutos.
Juan Lanus

0

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";

0

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

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

Comentando aqui porque está relacionado ao Node.JS. Eu tive que reiniciar o aplicativo no meu provedor de hospedagem
Reed

0

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"> 

0

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


0

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)


0

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" />
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.