Scripts gets interpreted as Stylesheet but transferred with MIME type text/html

StackOverflow https://stackoverflow.com/questions/22221147

Question

I'm getting two console warnings in Chrome:

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". domain/:11
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://domain/". domain/:11

On line 11, I have: 

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>

Here's all of the code for the head section: 

<head>
<meta charset="UTF-8">
<title>Laoautod</title>

<meta http-equiv = "Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/base.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
<script type="text/javascript" src="js/center.js"></script>
<script type="text/javascript">
    function displayResult()
                    {
        var x=document.getElementById("checkbox").defaultChecked;
        alert(x);
                    }
</script>
<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'accountID']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
</head>

The HTML code is inside index.php file so I added header('Content-type: text/css'); in the beginning of the pages script. I also included AddCharset utf-8 .css .js and AddType text/css .css in the .htaccess file but no luck loosing the warnings.

What exactly is causing this and how do you get rid of the warnings?

Était-ce utile?

La solution

Okay, I found the problem.

The reason I was getting warnings was because I was using @import in base.css to bring in scripts that were not in their location. To be precise, I was missing 2 scripts, so presumably that's the reason I got 2 warnings.

Autres conseils

The point to note is;

Essentially the problem can also be caused when every request, including those for static content are being authenticated.

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

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(<comma separated list of other permitted paths>, "/plugins/**", "/pages/**").permitAll()
            // other antMatchers can follow here
    }

}

Excluding these paths "/plugins/**" and "/pages/**" from authentication made the errors go away.

Cheers!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top