Recurso interpretado como hoja de estilo pero transferido con texto tipo MIME / html (parece no estar relacionado con el servidor web)

Tengo este problema Chrome continúa devolviendo este error

Recurso interpretado como hoja de estilo pero transferido con texto tipo MIME / html

Los archivos afectados por este error son solo el Estilo, elegido y jquery-gentleselect (otros archivos CSS que se importan en el índice de la misma manera funcionan bien y sin error). Ya he verificado mi tipo MIME y text / css ya está en CSS.

Sinceramente, me gustaría comenzar por comprender el problema (algo que parece que no puedo hacer solo).

Me gustaría comenzar entendiendo el problema

Los navegadores realizan solicitudes HTTP a los servidores. El servidor luego realiza una respuesta HTTP.

Tanto las solicitudes como las respuestas consisten en un montón de encabezados y un cuerpo (a veces opcional) con algún contenido.

Si hay un cuerpo, uno de los encabezados es el Content-Typeque describe qué es el cuerpo (¿es un documento HTML? ¿Una imagen? ¿El contenido de un envío de formulario? Etc.).

Cuando solicita su hoja de estilo, su servidor le dice al navegador que es un documento HTML ( Content-Type: text/html) en lugar de una hoja de estilo ( Content-Type: text/css).

Ya he comprobado mi myme.type y text / css ya está en css.

Entonces, algo más sobre su servidor es hacer que esa hoja de estilo venga con el tipo de contenido incorrecto.

Use la pestaña Red de las herramientas de desarrollo de su navegador para examinar la solicitud y la respuesta.

¿Usando angular?

Esta es una advertencia muy importante para recordar.

La etiqueta base no solo debe estar en la cabeza sino en la ubicación correcta.

Tenía mi etiqueta base en el lugar incorrecto en la cabeza, debería aparecer antes de cualquier etiqueta con solicitudes de URL. Básicamente, colocarlo como la segunda etiqueta debajo del título lo resolvió para mí.

<base href="/">

Escribí una pequeña publicación aquí

También tuve problemas con este error y encontré una solución. Esto no explica por qué ocurrió el error, pero parece solucionarlo en algunos casos.

Incluya una barra diagonal / antes de la ruta al archivo css, así:

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

Mi problema fue más simple que todas las respuestas en esta publicación.

Tuve que configurar IIS para incluir contenido estático.

Prueba esto <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

¿dónde ##está tu carpeta en la que está tu archivo .CSS?

No te olvides de: ..(puntos dobles).

Establecer las credenciales de autenticación anónima en la identidad del grupo de aplicaciones me ayudó.

También estaba enfrentando el mismo problema. Y después de hacer un poco de I + D, descubrí que el problema estaba en el nombre del archivo. El nombre del archivo real era "lightgallery.css", pero durante el enlace escribí "lightGallery.css" .

Más información:

Funcionó bien en mi localhost (SO: Windows 8.1 y Servidor: Apache). Pero cuando cargué mi aplicación en un servidor remoto (sistema operativo y servidor web diferente que mi servidor local) no funcionó, dándome el mismo error que el suyo.

Entonces, el problema era la distinción entre mayúsculas y minúsculas (con respecto a los nombres de archivo) del servidor.

Según las otras respuestas, parece que este mensaje tiene muchas causas, pensé en compartir mi solución individual en caso de que alguien tenga mi problema exacto en el futuro.

Nuestro sitio carga los archivos CSS de una distribución de AWS Cloudfront, que utiliza un depósito S3 como origen. Este contenedor S3 en particular se mantuvo sincronizado con un servidor Linux que ejecuta Jenkins. El synccomando s3cmdestablece el tipo de contenido para el objeto S3 automáticamente en función de lo que dice el sistema operativo (presumiblemente basado en la extensión del archivo). Por alguna razón, en nuestro servidor, todos los tipos se configuraron correctamente, excepto los .cssarchivos, que dieron el tipo text/plain. En S3, cuando verifica los metadatos en las propiedades de un archivo, puede establecer el tipo a lo que desee. Configurarlo para text/csspermitir que nuestro sitio interprete correctamente los archivos como CSS y se cargue correctamente.

En caso de que sirva CSS estático con nginx, debe agregar

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

o

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

a nginx conf

La respuesta de @Rob Sedgwick me dio un puntero, sin embargo, en mi caso, mi aplicación era una aplicación Spring Boot . Así que acabo de agregar exclusiones en mi configuración de seguridad para las rutas a los archivos en cuestión ...

NOTA: esta solución está basada en SpringBoot ... Lo que deba hacer puede diferir según el lenguaje de programación que esté utilizando y / o el marco de trabajo que esté utilizando

Sin embargo, el punto a tener en cuenta es;

Esencialmente, el problema puede ser causado cuando cada solicitud, incluidas las de contenido estático, se autentica.

Entonces, digamos que algunas rutas a mi contenido estático que estaban causando los errores son las siguientes;

Una ruta llamada "complementos"

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

Y un camino llamado "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

Luego solo agrego las exclusiones de la siguiente manera en mi configuración de seguridad de Spring Boot;

@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
    }

}

¡Salud!

Usando angular

En mi caso, usar en ng-hreflugar de hrefresolverlo por mí.

Nota :

Estoy trabajando con laravel como back-end

Estaba enfrentando lo mismo, con el mismo archivo .htaccess para hacer bonitas URL. después de algunas horas de mirar y experimentar. descubrí que el error se debió a la vinculación de archivos relativamente.

el navegador comenzará a buscar el mismo archivo html de origen para todos los archivos css, js e imágenes, cuando exploraría algunos pasos en el servidor.

para contrarrestar esto, puede usar la <base>etiqueta en su fuente html,

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

y enlace a archivos como,

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

o use enlaces absolutos para todos sus archivos.

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

Si está en JSP, este problema puede provenir de su asignación de servlet. si su mapeo toma url por defecto de esta manera:

@WebServlet("/")

entonces el contenedor interpreta su url css y va al servlet en lugar de ir al archivo css.

tuve el mismo problema, cambié mi mapeo y ahora todo funciona

Tengo un problema similar en MVC4 usando la autenticación de formularios. El problema era esta línea en web.config,

<modules runAllManagedModulesForAllRequests="true">

Esto significa que cada solicitud, incluidas las de contenido estático, se autentica.

Cambie esta línea a:

<modules runAllManagedModulesForAllRequests="false">

También me enfrento a este problema recientemente en Chrome . Solo doy la ruta absoluta para resolver mi problema de archivo CSS

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

Quiero ampliar el punto de Todd R en el OP. En las páginas asp.net, el web.configarchivo define los permisos necesarios para acceder a cada archivo o carpeta en la aplicación. En nuestro caso, la carpeta de archivos CSS no permitía el acceso a usuarios no autorizados, lo que provocaba un error en la página de inicio de sesión antes de que el usuario fuera autorizado. El cambio de los permisos requeridos en web.configusuarios no autorizados permitidos para acceder a los archivos CSS y resolvió este problema.

En caso de que alguien venga a esta publicación y tenga un problema similar. Acabo de experimentar un problema similar, pero la solución fue bastante simple.

Un desarrollador había dejado caer por error una copia de web.config en el directorio CSS. Una vez eliminados, todos los errores se resolvieron y la página se mostró correctamente.

Me encontré con el mismo problema al reanudar el trabajo en un antiguo proyecto de pila MEAN. Estaba usando nodemonmi servidor de desarrollo local y obtuve el mismo error Resource interpreted as stylesheet but transferred with MIME type text/html. Cambié de nodemona http-serverque se puede encontrar aquí . De inmediato funcionó para mí.

Esto se debe a que debe haber establecido el tipo de contenido como text / html en lugar de text / css para la página del servidor (php, node.js, etc.)

Esto ocurrió cuando eliminé el protocolo del enlace CSS para una hoja de estilo CSS servida por un CDN de Google.

Esto no da ningún error:

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

Pero esto da el error Recurso interpretado como hoja de estilo pero transferido con texto tipo MIME / html :

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

Estaba enfrentando un problema similar. Y explorando soluciones en esta fantástica página de desbordamiento de pila.

La respuesta de user54861 ​​(nombres que no coinciden en caso de sensibilidad) me da curiosidad por inspeccionar mi código nuevamente y me di cuenta de que " no cargué dos archivos js que los cargué en la etiqueta de la cabeza ". :-)

Cuando los cargué, el problema desaparece. ¡Y el código se ejecuta y la página se procesa sin ningún otro error!

Entonces, la moraleja de la historia es no olvidarse de asegurarse de que todos sus archivos js estén cargados donde la página los está buscando.

Encontré el mismo problema con una aplicación .NET, un código abierto de CMS llamado MojoPortal. En uno de mis temas y máscaras para un sitio en particular, cuando navegaba o probaba, se molería y disminuiría la velocidad como si se estuviera ahogando.

Mi problema no era del atributo "tipo" para el CSS pero era "esa otra cosa". Mi cambio exacto fue en la Web.Config . Cambié todos los valores a FALSE para MinifyCSS, CacheCssOnserver y CacheCSSinBrowser.

Una vez que se configuró, el sitio web volvió a funcionar rápidamente.

Tuve el mismo error porque olvidé enviar primero un encabezado correcto

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

Usando ReactJs, cuando agrego un archivo de estilo a index.html usando un enlace relativo como

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

y luego navego a una ruta decir; localhost:3000/artisty actualizar, me sale el error.

El error desapareció después de que reemplacé el enlace relativo con un enlace absoluto, por ejemplo;

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

Encontré este problema al cargar CSS para un módulo de diseño React que instalé con npm. Tienes que importar dos archivos .css para que este módulo funcione, así que inicialmente los importé así:

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

pero descubrí que la extensión del archivo debe descartarse, por lo que funcionó:

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

Si nodejs y usando express, el siguiente código funciona ...

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

Tengo el mismo problema exacto y después de unos minutos bromeando, descifré que no agregué la extensión del archivo a mi encabezado. así que cambié la siguiente línea:

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

a

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

Comencé a tener el problema hoy solo en Chrome y no en safari para el mismo proyecto / url para mi contenedor de goormide (node.js)

Después de probar varias sugerencias anteriores que no parecían funcionar y retroceder en algunos cambios de código que hice de ayer a hoy, que tampoco hicieron ninguna diferencia, terminé haciendo clic en la configuración de Chrome:

1.Configuraciones;

2. Desplácese hacia abajo, seleccione: "Avanzado";

3. Desplácese hacia abajo, seleccione: "Restaurar la configuración a sus valores predeterminados originales";

Eso parece haber solucionado el problema ya que ya no recibo la advertencia / error en la consola y la página se muestra como debería. Al leer las publicaciones anteriores, parece que el problema puede ocurrir desde cualquier número de fuentes, por lo que el restablecimiento de la configuración es una posible solución genérica. Salud

Si está sirviendo la aplicación en prod, asegúrese de que está sirviendo los archivos estáticos con el trabajador de servicio. Tuve este error cuando estaba sirviendo solo una subcarpeta estática de React build en Django (sin activos que tengan estilos)

Usando React

Encontré este error en mi aplicación de perfil de reacción. Mi aplicación se comportó como si tratara de hacer referencia a una URL que no existe. Creo que esto tiene algo que ver con el comportamiento de webpack.

Si está vinculando archivos en su carpeta pública, debe recordar usar% PUBLIC_URL% antes del recurso como este:

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