リソースはスタイルシートとして解釈されますが、MIMEタイプtext / htmlで転送されます（Webサーバーに関連していないようです）

私はこの問題を抱えています。Chromeは引き続きこのエラーを返します

リソースはスタイルシートとして解釈されますが、MIMEタイプtext / htmlで転送されます

このエラーの影響を受けるファイルは、Style、choose、jquery-gentleselectのみです（同じ方法でインデックスにインポートされる他のCSSファイルは、エラーなく正常に機能します）。私はすでにMIMEタイプをチェックしており、text / cssはすでにCSSにあります。

正直なところ、問題を理解することから始めたいと思います（一人ではできないようです）。

問題を理解することから始めたい

ブラウザはサーバーにHTTPリクエストを送信します。次に、サーバーはHTTP応答を行います。

要求と応答はどちらも、一連のヘッダーと、コンテンツが含まれている（オプションの場合もある）本文で構成されています。

本文がある場合、ヘッダーの1つはContent-Type本文が何であるかを記述するヘッダーです（HTMLドキュメントですか？画像ですか？フォーム送信の内容ですか？など）。

スタイルシートを要求すると、サーバーはブラウザContent-Type: text/htmlに、スタイルシート（Content-Type: text/css）ではなくHTMLドキュメント（）であることを通知します。

私はすでにmyme.typeをチェックしており、text / cssはすでにcssにあります。

次に、サーバーの別の問題により、そのスタイルシートに間違ったコンテンツタイプが含まれています。

ブラウザの開発者ツールの[ネット]タブを使用して、リクエストとレスポンスを調べます。

Angularを使用していますか？

これは覚えておくべき非常に重要な警告です。

ベースタグは頭の中だけでなく、適切な場所にある必要があります。

頭の間違った場所に私のベースタグがありました、それはURLリクエストのあるタグの前に来るはずです。基本的には、タイトルの下の2番目のタグとして配置することで解決しました。

<base href="/">

ここに小さな投稿を書いた

私もこのエラーに問題があり、解決策を見つけました。これはエラーが発生した理由を説明していませんが、場合によってはエラーを修正しているようです。

次の ように、CSSファイルへのパスの前にスラッシュ/を含めます 。

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

私の問題は、この投稿のすべての回答よりも単純でした。

静的コンテンツを含めるようにIISをセットアップする必要がありました。

これを試して <link rel="stylesheet" type="text/css" href="../##/yourcss.css">

どこ ##あなた.CSSである、あなたのフォルダがある-ファイル

忘れないでください：（..二重ドット）。

匿名認証の資格情報をアプリケーションプールIDに設定すると、私にとってはうまくいきました。

私も同じ問題に直面していました。いくつかのR＆Dを行った後、問題はファイル名にあることがわかりました。実際のファイルの名前は「lightgallery.css」でしたが、リンク中に「lightGallery.css」と入力しました。

より詳しい情報：

それは私のローカルホスト（OS：Windows 8.1＆サーバー：Apache）でうまく機能しました。しかし、自分のアプリケーションをリモートサーバー（ローカルホストとは異なるOSおよびWebサーバー）にアップロードすると、機能せず、あなたと同じエラーが発生しました。

したがって、問題はサーバーの大文字と小文字の区別（ファイル名に関して）でした。

他の回答に基づいて、このメッセージには多くの原因があると思われるので、将来誰かが正確に問題を抱えた場合に備えて、個別の解決策を共有したいと思いました。

私たちのサイトは、AWS CloudfrontディストリビューションからCSSファイルをロードし、S3バケットをオリジンとして使用しています。この特定のS3バケットは、Jenkinsを実行しているLinuxサーバーとの同期が維持されていました。sync介したコマンドs3cmdセットに自動的にOSが言うに基づいてS3オブジェクトのContent-Typeの（おそらく、ファイル拡張子に基づいて）。なんらかの理由で、サーバーでは、型を指定した.cssファイルを除いて、すべての型が正しく設定されていましたtext/plain。S3では、ファイルのプロパティでメタデータを確認するときに、タイプを任意に設定できます。これを設定してtext/css、サイトがファイルをCSSとして正しく解釈し、正しくロードできるようにします。

nginxで静的CSSを提供する場合は、追加する必要があります

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

または

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

nginx confへ

@Rob Sedgwickの答えは私に指針を与えましたが、私の場合、私のアプリはSpring Boot Applicationでした。そのため、関係するファイルへのパスの除外をSecurity Configに追加しました...

注-このソリューションは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

そして「ページ」と呼ばれるパス

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

}

乾杯！

Angularの使用

私の場合ng-href、href解決する代わりに使用してください。

注意 ：

私はバックエンドとしてララベルを使用しています

かなりのURLを作成するための同じ.htaccessファイルで、同じことに直面していました。数時間見て回って実験してみました。私はエラーが比較的リンクしているファイルが原因であることがわかりました。

ブラウザは、サーバー内のいくつかの手順を閲覧すると、すべてのcss、js、およびimageファイルに対して同じソースhtmlファイルのフェッチを開始します。

これに対抗する<base>には、htmlソースでタグを使用するか、

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

次のようなファイルにリンクします

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

または、すべてのファイルに絶対リンクを使用します。

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

JSPを使用している場合、この問題はサーブレットマッピングが原因である可能性があります。あなたのマッピングが次のようにデフォルトでURLを取る場合：

@WebServlet("/")

次に、コンテナはcssのURLを解釈し、cssファイルではなくサーブレットに移動します。

私は同じ問題を抱えていました、私は私のマッピングを変更し、今すべての作品

フォーム認証を使用するMVC4にも同様の問題があります。問題は、web.configのこの行でした。

<modules runAllManagedModulesForAllRequests="true">

つまり、静的コンテンツを含むすべてのリクエストが認証されます。

この行を次のように変更します。

<modules runAllManagedModulesForAllRequests="false">

私は最近、Chromeでもこの問題に直面しています。CSSファイルの問題解決への絶対パスを指定するだけです。

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

OPでトッドRのポイントを拡大したいです。asp.netページでは、web.configファイルはアプリケーションの各ファイルまたはフォルダーにアクセスするために必要なアクセス許可を定義します。私たちのケースでは、CSSファイルのフォルダーは許可されていないユーザーのアクセスを許可していなかったため、ユーザーが許可される前にログインページで失敗しました。許可さweb.configれた権限のないユーザーがCSSファイルにアクセスするために必要な権限を変更し、この問題を解決しました。

誰かがこの投稿に来て、同様の問題がある場合。私は同様の問題を経験しましたが、解決策は非常に簡単でした。

開発者が誤ってweb.configのコピーをCSSディレクトリにドロップしました。削除すると、すべてのエラーが解決され、ページが適切に表示されました。

古いMEANスタックプロジェクトの作業を再開しているときに同じ問題に遭遇しました。私はnodemonローカル開発サーバーとして使用していて、同じエラーが発生しましたResource interpreted as stylesheet but transferred with MIME type text/html。私はから変更nodemonにhttp-server見つけることができるここに。すぐにうまくいきました。

これは、サーバーページ（php、node.jsなど）のコンテンツタイプをtext / cssではなくtext / htmlに設定する必要があるためです。

これは、Google CDNによって提供されるCSSスタイルシートのCSSリンクからプロトコルを削除したときに発生しました。

これはエラーを与えません：

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

しかし、これはエラーResourceをスタイルシートとして解釈しますが、MIMEタイプtext / htmlで転送されます：

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

私は同様の問題に直面していました。そして、この素晴らしいスタックオーバーフローページでソリューションを探索します。

user54861の応答（大文字と小文字の区別で名前が一致しない）により、コードを再度検査したいと思い、「ヘッドタグにロードした2つのjsファイルをアップロードしていません。:-)

それらをアップロードすると、問題が発生します！そして、コードが実行され、ページが別のエラーなしでレンダリングされます！

そのため、ページの探している場所にすべてのjsファイルがアップロードされていることを確認することを忘れないでください。

.NETアプリケーションであるMojoPortalと呼ばれるCMSオープンソースでも同じ問題に遭遇しました。特定のサイトの私のテーマとスキンの1つで、閲覧またはテストすると、窒息のように粉砕されて遅くなります。

私の問題はCSSの「type」属性ではなく、「それ以外のこと」でした。私の正確な変更はWeb.Configにありました。MinifyCSS、CacheCssOnserver、およびCacheCSSinBrowserのすべての値をFALSEに変更しました。

それが設定されると、Webサイトは再び本番環境で高速になりました。

最初に正しいヘッダーを送信するのを忘れたため、同じエラーが発生しました

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

ReactJsを使用して、次のような相対リンクを使用してスタイルファイルをindex.htmlに追加すると、

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

そして、私は言うルートに移動します。 localhost:3000/artist更新すると、エラーが発生します。

相対リンクを絶対リンクに置き換えた後、エラーは消えました。

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

npmでインストールしたReactレイアウトモジュールのCSSを読み込むときに、この問題が発生しました。このモジュールを実行するには、2つの.cssファイルをインポートする必要があるため、最初は次のようにインポートしました。

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

しかし、ファイル拡張子を削除する必要があることがわかりましたので、これはうまくいきました：

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

もしnodejsと使用して表現し 、以下のコードの作品を...

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

私はまったく同じ問題を抱えており、数分たったらだまして、ヘッダーにファイル拡張子を追加するのに失敗したことがわかりました。だから私は次の行を変更しました：

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

に

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

Goormideコンテナー（node.js）の同じプロジェクト/ URLのサファリではなく、クロムでのみ問題が発生し始めました

機能していないように見える上記のいくつかの提案を試してみて、昨日から今日までのコードの変更をバックトラックしたところ、Chromeの設定をクリックすることになり、違いはありませんでした。

1.設定;

2.下にスクロールして、次を選択します。「詳細」;

3.下にスクロールして、次を選択します。「設定を元のデフォルトに戻す」;

コンソールに警告/エラーが表示されなくなり、ページが正しく表示されるようになったため、問題は解決したようです。上記の投稿を読むと、問題は任意の数のソースから発生する可能性があるため、設定のリセットは潜在的な一般的な修正です。乾杯

prodでアプリを提供している場合は、Service Workerで静的ファイルを提供していることを確認してください。DjangoでReactビルドの静的サブフォルダーのみを提供しているときにこのエラーが発生しました（スタイルを持つアセットなし）

Reactの使用

反応プロファイルアプリでこのエラーに遭遇しました。私のアプリは、存在しないURLを参照しようとしたような動作をしました。これは、webpackの動作と関係があると思います。

パブリックフォルダー内のファイルをリンクする場合は、次のようなリソースの前に％PUBLIC_URL％を使用することを忘れないでください。

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