我有这个问题。Chrome继续返回此错误

资源解释为样式表,但以MIME类型text/html传输

受此错误影响的文件只有Style、chosen和jquery-gentleselect(以相同方式导入索引的其他CSS文件工作良好且没有错误)。我已经检查了我的MIME类型和文本/css已经在css上。

老实说,我想从理解问题开始(这似乎是我一个人做不到的事情)。


当前回答

我最近在chrome浏览器上也遇到了这个问题。我只是给我的CSS文件解决问题的绝对路径。

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

其他回答

@Rob Sedgwick的回答给了我一个指针,然而,在我的情况下,我的应用程序是一个春季启动应用程序。所以我只是在我的安全配置中为相关文件的路径添加了排除…

说明—此解决方案基于springboot…你需要做的可能会根据你使用的编程语言和/或你使用的框架而有所不同

然而,要注意的一点是;

从本质上讲,当每个请求,包括 那些静态内容正在被验证。

所以让我们说一些路径到我的静态内容,导致错误如下;

一个叫做“插件”的路径

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

还有一个路径叫做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

然后,我只需在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
    }

}

从身份验证中排除这些路径“/plugins/**”和“/pages/**”可以消除错误。


干杯!

根据其他的回答,这条消息似乎有很多原因,我想我只是分享我的个人解决方案,以防将来有人有我的确切问题。

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.

如果你使用nginx提供静态css,你应该添加

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

到nginx conf

当我从谷歌CDN提供的css样式表的css链接中删除协议时,就发生了这种情况。

这不会产生错误:

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

但是这会给出错误资源解释为样式表,但传输MIME类型text/html:

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

我在恢复一个旧的MEAN堆栈项目时遇到了同样的问题。我使用nodemon作为我的本地开发服务器,得到了相同的错误资源解释为样式表,但使用MIME类型text/html传输。我从nodemon更改为http-server,可以在这里找到。它立刻对我起了作用。