Resource interpreted as stylesheet but transferred with MIME type text html seems not related with web server

Question

I have this problem  Chrome continues to return this error      Resource interpreted as stylesheet but transferred with MIME type text html   The files affected by this error are just the Style  chosen and jquery-gentleselect  other CSS files that are imported in the index in the same way work well and without error   I ve already checked my MIME type and text css is already on CSS   Honestly I d like to start by understanding the problem  a thing that seems I cannot do alone

User · Answer

I came across the same issue whilst resuming work on a old MEAN stack project  I was using nodemon as my local development server and got the same error Resource interpreted as stylesheet but transferred with MIME type text html  I changed from nodemon to http-server which can be found here  It immediately worked for me

User · Answer

In case anyone comes to this post and has a similar issue   I just experienced a similar problem  but the solution was quite simple     A developer had mistakenly dropped a copy of the web config into the CSS directory   Once deleted  all errors were resolved and the page properly displayed

User · Answer

i was facing the same thing  with sort of the same  htaccess file for making pretty urls  after some hours of looking around and experimenting  i found out that the error was because of relatively linking files    the browser will start fetching the same source html file for all the css  js and image files  when i would browse a few steps deep into the server   to counter this you can either use the  lt base gt  tag on your html source    lt base href  http   localhost assets   gt    and link to files like    lt link rel  stylesheet  type  text css  href  css style css    gt   lt script src  js script js  gt  lt  script gt    or use absolute links for all your files    lt link rel  stylesheet  type  text css  href  http   localhost assets css style css    gt   lt script src  http   localhost assets js script js  gt  lt  script gt   lt img src  http   localhost assets images logo png    gt

User · Answer

I encountered this problem when loading CSS for a React layout module that I installed with npm  You have to import two  css files to get this module running  so I initially imported them like this    import              node modules react-grid-layout css styles css     but found out that the file extension has to be dropped  so this worked    import              node modules react-grid-layout css styles

User · Answer

Based on the other answers it seems like this message has a lot of causes  I thought I d just share my individual solution in case anyone has my exact problem in the future    Our site loads the CSS files from an AWS Cloudfront distribution  which uses an S3 bucket as the origin  This particular S3 bucket was kept synced to a Linux server running Jenkins  The sync command via s3cmd sets the Content-Type for the S3 object automatically based on what the OS says  presumably based on the file extension   For some reason  in our server  all the types were being set correctly except  css files  which it gave the type text plain  In S3  when you check the metadata in the properties of a file  you can set the type to whatever you want  Setting it to text css allowed our site to correctly interpret the files as CSS and load correctly

User · Answer

This occurred when I removed the protocol from the css link for a css stylesheet served by a google CDN   This gives no error    lt link rel  stylesheet  href    fonts googleapis com css family Architects Daughter  gt    But this gives the error Resource interpreted as Stylesheet but transferred with MIME type text html     lt link rel  stylesheet  href  fonts googleapis com css family Architects Daughter  gt

User · Answer

It is because you must have set content type as text html instead of text css for your server page  php node js etc

User · Answer

In my case  same error was coming with JSP  This is how I got to the root of this issue   I went to the Network tab and clearly saw that the browser request to fetch the css was returning response header having  Content-type     text html   I opened another tab and manually hit the request to fetch the css  It ended up returning a html log in form  Turns out that my web application had a url mapping for path     Tomcat servlet entry     WebServlet         index       So  any unmatching request URLs were somehow being matched to   and the corresponding servlet was returning a Log in html form  I fixed it by removing the mapping to    Also  the tomcat configuration wrt handling css MIME-TYPE was already present

User · Answer

For anyone that might be having this issue  I was building a custom MVC in PHP when I encountered this issue  I was able to resolve this by setting my assets  css js images  files to an absolute path  Instead of using url like href  quot css style css quot  which use this entire current url to load it  As an example  if you are in http   example com user 5  it will try to load at http   example com user 5 css style css  To fix it  you can add a   at the start of your asset s url  i e  href  quot  css style css quot    This will tell the browser to load it from the root of your url  In this example  it will try to load http   example com css style css  Hope this comment will help you

User · Answer

Using Angular   This is a very important caveat to remember   The base tag needs to not only be in the head but in the right location   I had my base tag in the wrong place in the head  it should come before any tags with url requests  Basically placing it as the second tag underneath the title solved it for me     lt base href     gt    I wrote a little post on it here

User · Answer

Answer might be given above  I had the same problem and couldn t resolve it  Make it sure to add external js file as   lt script src  main js  gt  lt  script gt

User · Answer

I was facing similar issue  And Exploring solutions in this fantastic Stack Overflow page   user54861  s response  mismatching names in case sensetivity  makes me curious to inspect my code again and realized that  I didnt upload two js files that I loaded them in head tag    -   When I uploaded them the issue runs away   And code runs and page rendered without any another error   So  moral of the story is don t forget to make sure that all of your js files are uploaded where the page is looking for them

User · Answer

I want to expand on Todd R s point in the OP  In asp net pages  the web config file defines permissions needed to access each file or folder in the application  In our case  the folder of CSS files did not allow access for unauthorized users  causing it to fail on the login page before the user was authorized  Changing the required permissions in web config allowed unauthorized users to access the CSS files and solved this problem

User · Answer

If you are on JSP  this problem can come from your servlet mapping  if your mapping takes url by defaut like this    WebServlet        then the container interpret your css url  and goes to the servlet instead of going to the css file   i had the same issue  i changed my mapping and now everyting works

User · Answer

I also had problem with this error  and came upon a solution  This does not explain why the error occurred  but it seems to fix it in some cases   Include a forward slash     before the path to the css file  like so    lt link rel  stylesheet  href   css bootstrap min css  gt

User · Answer

Using Angular  In my case using ng-href instead of href solved it for me   Note    I am working with laravel as back-end

User · Answer

I started to get the issue today only on chrome and not safari for the same project url for my goormide container  node js   After trying several suggestions above which didn t appear to work and backtracking on some code changes I made from yesterday to today which also made no difference I ended up in the chrome settings clicking   1 Settings   2 scroll down to bottom  select   Advanced    3 scroll down to bottom  select   Restore settings to their original defaults    That appears to have fixed the problem as I no longer get the warning error in the console and the page displays as it should  Reading the posts above it appears the issue can occur from any number of sources so the settings reset is a potential generic fix  Cheers

User · Answer

If you are serving the app in prod make sure you are serving the static files with service worker  I had this error when I was serving only static subfolder of React build on Django  without assets that have styles

User · Answer

I have the same exact problem and after a few minutes fooling around I deciphered that I missed to add the file extension to my header  so I changed the following line     lt link uic-remove rel  stylesheet  href  css bahblahblah  gt    to   lt link uic-remove rel  stylesheet  href  css bahblahblah css  gt

User · Answer

In case you serve static css with nginx you should add  location     css       add header  Content-Type    text css    location     js       add header  Content-Type    application x-javascript      or   location     css      default type text css    location     js      default type application x-javascript      to nginx conf

User · Answer

Had the same error because I forgot to send a correct header a first  header  Content-type  text css  charset  UTF-8    print  body   text-align  justify  font-size  2em

User · Answer

Using ReactJs  when I add style file to index html using relative link such as   lt link rel  stylesheet  href    css style css  gt   and then I navigate to a route say  localhost 3000 artist and refresh  I get the error     The error disappeared after I replaced the relative link with an absolute link say    lt link rel  stylesheet  href  http   localhost project public css style css

User · Answer

I was also facing the same problem  And after doing some R amp D  I found that the problem was with the file name  The name of the actual file was  lightgallery css  but while linking I has typed  lightGallery css     More Info   It worked well on my localhost  OS  Windows 8 1  amp  Server  Apache   But when I uploaded my application to a remote server   Different OS  amp  Web server than than my localhost  it didn t work  giving me the same error as yours   So  the issue was the case sensitivity  with respect to file names  of the server

User · Answer

I also face this problem recently on chrome  I just give absolute path to my CSS file problem solve    lt link rel  stylesheet  href   lt   SS URL  gt arica style css  type  text css    gt

User · Answer

i d like to start by understanding the problem   Browsers make HTTP requests to servers  The server then makes an HTTP response   Both requests and responses consist of a bunch of headers and a  sometimes optional  body with some content in it   If there is a body  then one of the headers is the Content-Type which describes what the body is  is it an HTML document  An image  The contents of a form submission  etc    When you ask for your stylesheet  your server is telling the browser that it is an HTML document  Content-Type  text html  instead of a stylesheet  Content-Type  text css       I ve already checked my myme type and text css is already on css    Then something else about your server is making that stylesheet come with the wrong content type   Use the Net tab of your browser s developer tools to examine the request and the response

User · Answer

Rob Sedgwick s answer gave me a pointer  However  in my case my app was a Spring Boot Application  So I just added exclusions in my Security Config for the paths to the concerned files      NOTE - This solution is SpringBoot-based    What you may need to do might differ based on what programming language you are using and or what framework you are utilizing  However the point to note is      Essentially the problem can be caused when every request  including   those for static content are being authenticated    So let s say some paths to my static content which were causing the errors are as follows   A path called  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   And a path called  pages      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   Then I just add the exclusions as follows in my 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  lt comma separated list of other permitted paths gt     plugins        pages      permitAll                  other antMatchers can follow here             Excluding these paths   plugins     and   pages     from authentication made the errors go away      Cheers

User · Answer

I came across the same issue with a  NET application  a CMS open-source called MojoPortal  In one of my themes and skin for a particular site  when browsing or testing it would grind and slow down like it was choking   My issue was not of the  type  attribute for the CSS but it was  that other thing   My exact change was in the Web Config  I changed all the values to FALSE for MinifyCSS  CacheCssOnserver  and CacheCSSinBrowser   Once that was set the web site was speedy once again in production

User · Answer

Setting the Anonymous Authentication Credentials to Application Pool Identity did the trick for me

User · Answer

I faced the same issue while configuring Postfix Admin 3 2  According to the official documentation  the whole Postfix Admin content should be extracted into a separate directory  i e   srv postfixadmin and not the document root  Only the  srv postfixadmin public directory should be symlinked into  var www html document root  I have just extracted the whole content into  var www html  Having played with Nginx server block settings  I managed example com postfixadmin resolving from  var www html postfixadmin public  Nevertheless  images and CSS were not available with 404 status code  The stylesheets were broken  I got the error message OP quoted with respective 404 entries in access log  In my case  I just moved  var www html postfixadmin into  srv postfixadmin and made ln -s  srv postfixadmin public  var www html postfixadmin   This solved the issue completely  Here is the reference

User · Answer

If nodejs and using express  the below code works     res set  Content-Type    text css

User · Answer

Using React  I came across this error in my react profile app  My app behaved kind of like it was trying to reference a url that doesn t exist  I believe this has something to do with how webpack behaves    If you are linking files in your public folder you must remember to use  PUBLIC URL  before the resource like this     lt link type  text css  rel  stylesheet  href   PUBLIC URL  bootstrap min css    gt

User · Answer

My issue was simpler than all the answers in this post    I had to setup IIS to include static content

User · Answer

Try this  lt link rel  stylesheet  type  text css  href        yourcss css  gt    where    is your folder wherein is your  CSS - file  Don t forget about the      double dots

User · Answer

I have a similar problem in MVC4 using forms authentication  The problem was this line in the web config    lt modules runAllManagedModulesForAllRequests  true  gt    This means that every request  including those for static content  being authenticated   Change this line to    lt modules runAllManagedModulesForAllRequests  false  gt

[html] Resource interpreted as stylesheet but transferred with MIME type text/html (seems not related with web server)

Examples related to html

Examples related to css

Examples related to google-chrome