html - valido - sec7113 se omitió css debido a un error de coincidencia de tipo mime
Recurso interpretado como hoja de estilo pero transferido con texto tipo MIME/html(parece no estar relacionado con el servidor web) (21)
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 simplemente el Estilo, elegido y jquery-gentleselect (otros archivos CSS que se importan en el índice de la misma manera funcionan bien y sin errores). Ya he comprobado mi tipo MIME y text / css ya está en CSS.
Honestamente, me gustaría comenzar por entender el problema (algo que parece que no puedo hacer solo).
me gustaría empezar entendiendo el problema
Los navegadores realizan solicitudes HTTP a los servidores. El servidor luego hace una respuesta HTTP.
Ambas solicitudes y respuestas consisten en un grupo de encabezados y un cuerpo (a veces opcional) con algún contenido.
Si hay un cuerpo, uno de los encabezados es el Content-Type que 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.
Luego, otra cosa sobre su servidor es hacer que esa hoja de estilo tenga 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.
Basado en las otras respuestas, parece que este mensaje tiene muchas causas, pensé que simplemente compartiría 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 bucket S3 como origen. Este cubo S3 particular se mantuvo sincronizado con un servidor Linux que ejecutaba Jenkins. El comando de sync través de s3cmd establece s3cmd el tipo de contenido para el objeto S3 en función de lo que dice el sistema operativo (presumiblemente en función de la extensión del archivo). Por alguna razón, en nuestro servidor, todos los tipos se configuraron correctamente, excepto los archivos .css , 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. Establecerlo en text/css permitió a nuestro sitio interpretar correctamente los archivos como CSS y cargarlos correctamente.
En caso de que alguien llegue 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 soltado una copia del web.config por error en el directorio CSS. Una vez eliminados, todos los errores se resolvieron y la página se mostró correctamente.
Es porque debe haber configurado el tipo de contenido como text / html en lugar de text / css para su página de servidor (php, node.js, etc.)
Estaba enfrentando lo mismo, con una especie del mismo archivo .htaccess para hacer URLs bonitas. después de algunas horas de mirar alrededor y experimentar. descubrí que el error se debía a la vinculación relativa de los archivos.
el navegador comenzará a buscar el mismo archivo fuente html para todos los css, js y archivos de imagen, cuando busque unos pocos pasos en el servidor.
para contrarrestar esto, puede usar la etiqueta <base> 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" />
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 sensibilidad de caso) me da curiosidad por inspeccionar mi código nuevamente y me di cuenta de que " no subí dos archivos js que cargué en la etiqueta principal ". :-)
Cuando los subí, ¡el problema se escapó! ¡Y el código se ejecuta y la página se representa sin ningún otro error!
Entonces, la moraleja de la historia es que no te olvides de asegurarte de que todos tus archivos js se carguen donde la página los esté buscando.
Esto ocurrió cuando eliminé el protocolo del enlace css para una hoja de estilo css servida por un google CDN.
Esto no da error:
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Architects+Daughter">
Pero esto da el error Resource interpretado como Stylesheet pero transferido con MIME tipo text / html :
<link rel="stylesheet" href="fonts.googleapis.com/css?family=Architects+Daughter">
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 debe hacer puede variar según el lenguaje de programación que esté utilizando y / o qué marco esté utilizando
Sin embargo, el punto a tener en cuenta es;
Esencialmente, el problema puede ser causado cuando se están autenticando todas las solicitudes, incluidas las de contenido estático.
Entonces, digamos que algunas rutas a mi contenido estático que causaban los errores son las siguientes;
Un camino llamado "complementos"
http://localhost:8080/plugins/styles/css/file-1.css
Y un camino llamado "páginas"
http://localhost:8080/pages/styles/css/style-1.css
Luego solo agrego las exclusiones de la siguiente manera en 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
}
}
Excluyendo estas rutas "/plugins/**" y "/pages/**" de la autenticación, los errores desaparecen.
¡Aclamaciones!
Me encontré con el mismo problema al reanudar el trabajo en un viejo proyecto MEAN stack. Estaba usando nodemon como mi servidor de desarrollo local y recibí el mismo error. Resource interpreted as stylesheet but transferred with MIME type text/html . Cambié de nodemon a http-server que se puede encontrar here . De inmediato funcionó para mí.
Me encontré con el mismo problema con una aplicación .NET, un código abierto de CMS llamado MojoPortal. En uno de mis temas y máscara para un sitio en particular, cuando navegas o pruebas, se reduce y se ralentiza, como si se estuviera ahogando.
Mi problema no era del atributo "tipo" para el CSS sino que 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 se aceleró una vez más en producción.
Pruebe esto <link rel="stylesheet" type="text/css" href="../##/yourcss.css">
donde ## es tu carpeta donde está tu archivo .CSS
No te olvides de los: .. (puntos dobles).
Quiero ampliar el punto de Todd R en el PO. En las páginas asp.net, el archivo web.config define los permisos necesarios para acceder a cada archivo o carpeta en la aplicación. En nuestro caso, la carpeta de archivos CSS no permitió el acceso de usuarios no autorizados, lo que provocó que fallara en la página de inicio de sesión antes de que se autorizara al usuario. Cambiar los permisos necesarios en web.config permitió a usuarios no autorizados acceder a los archivos CSS y resolvió este problema.
Si está en JSP, este problema puede provenir de su mapeo de servlet. si su mapeo toma url por defecto de esta manera:
@WebServlet("/")
luego, el contenedor interpreta su URL css y va al servlet en lugar de ir al archivo css.
tuve el mismo problema, cambié mi asignación y ahora todo funciona
También estaba enfrentando el mismo problema. Y después de hacer algo de I + D, descubrí que el problema era con el nombre del archivo. El nombre del archivo real era "lightgallery.css", pero al vincular he tipeado "lightGallery.css" .
Más información:
Funcionó bien en mi servidor local (sistema operativo: Windows 8.1 y servidor: Apache). Pero cuando subí mi aplicación a un servidor remoto (diferente sistema operativo y servidor web que mi servidor local) no funcionó, lo que me dio el mismo error que el tuyo.
Entonces, el problema era la sensibilidad de mayúsculas y minúsculas (con respecto a los nombres de archivos) del servidor.
También tuve un problema 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 inclinada / antes de la ruta al archivo css, de esta manera:
<link rel="stylesheet" href="/css/bootstrap.min.css">
Tengo un problema similar en MVC4 usando la autenticación de formularios. El problema era esta línea en el web.config,
<modules runAllManagedModulesForAllRequests="true">
Esto significa que cada solicitud, incluidas las de contenido estático, se autentica.
Cambia esta línea a:
<modules runAllManagedModulesForAllRequests="false">
¿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 equivocado en la cabeza, debe aparecer antes que las etiquetas 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 here
Usando Angular
En mi caso, el uso de ng-href lugar de href resolvió para mí.
Nota :
Estoy trabajando con laravel como back-end