web-dev-qa-db-ja.com

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

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

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

このエラーの影響を受けるファイルは、Style、selected、およびjquery-gentleselectです(同じ方法でインデックスにインポートされた他のCSSファイルでもエラーは発生しません)。私はすでに自分のMIMEタイプをチェックしており、text/cssはすでにCSS上にあります。

正直なところ、私は問題を理解することから始めたいのです(私は一人ではできないようなこと)。

146
Max

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

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

リクエストとレスポンスはどちらも、たくさんのヘッダと、内容を含んだ(オプションの)ボディで構成されています。

本文がある場合、ヘッダの1つは本文が何であるかを記述するContent-Typeです(それはHTML文書ですか?画像ですか?フォーム送信の内容?など)。

スタイルシートを要求すると、サーバーはブラウザに、それがスタイルシート(Content-Type: text/html)ではなくHTML文書(Content-Type: text/css)であることを伝えています。

Myme.typeとtext/cssはすでにcssに入っています。

それからあなたのサーバーに関する何か他のものがそのスタイルシートに間違ったコンテントタイプをつけさせています。

ブラウザの開発者ツールの[ネット]タブを使用して、要求と応答を調べます。

67
Quentin

Angularを使う?

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

ベースタグは、頭の中だけでなく正しい位置にある必要があります。

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

<base href="/">

ここにちょっとした記事を書いた ここ

93
Sten Muchow

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

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

<link rel="stylesheet" href="/css/bootstrap.min.css">

27
Trilochan

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

ここで、##はあなたのフォルダ、あなたの.CSSファイルです。

..(二重ドット)を忘れないでください。

9
seq

私の問題はこの記事の中のすべての答えよりも簡単でした。

静的コンテンツを含めるようにIISを設定する必要がありました。

enter image description here

9
JEuvin

私も同じ問題に直面していました。そしていくつかの研究開発をした後、私は問題がファイル名にあることがわかりました。実際のファイルの名前は "lightgallery.css"ですが、リンク中に "lightGallery.css"と入力しました.

詳細情報:

それは私のローカルホスト(OS:Windows 8.1&Server:Apache)でうまくいった。しかし、私が自分のアプリケーションをリモートサーバ(私のlocalhostとは異なるOSとWebサーバ)にアップロードしたときにはうまくいかず、あなたと同じエラーが発生しました。

そのため、問題はサーバーの大文字と小文字の区別(ファイル名に関して)でした。

7

匿名認証資格をアプリケーションプールIDに設定すると、うまくいきませんでした。

enter image description here

6
Felipe Cruz

Angularを使う

私の場合はhrefの代わりにng-hrefを使うことで解決しました。

注:

私はバックエンドとしてlaravelを使っています

4
Peter Wilson

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

私はサーバーの奥深くにいくつかのステップを閲覧するとブラウザは、すべてのCSS、JSおよび画像ファイルのための同じソースHTMLファイルの取得を開始します。

これに対処するには、HTMLソースに<base>タグを使用することができます。

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

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

@WebServlet("/")

その後、コンテナはあなたのcss URLを解釈し、cssファイルではなくサーブレットに行きます。

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

3
Greg Artisi

私はフォーム認証を使用しているMVC4で同様の問題を抱えています。問題はweb.configのこの行でした、

<modules runAllManagedModulesForAllRequests="true">

これは、静的コンテンツを含むすべての要求が認証されることを意味します。

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

<modules runAllManagedModulesForAllRequests="false">
2
Rob Sedgwick

enter image description here 私も最近この問題に直面していますクロム。私はCSSファイルの問題解決への絶対パスを与えるだけです。

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

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

1
Sandy Gettings

nodejsとexpressexpressを使用すると、以下のコードが動作します。

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

ReactJを使ってindex.htmlにスタイルファイルを追加するときは、

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

それから私はルートを言うにナビゲートします。 localhost:3000/artistを更新すると、エラーが発生します。

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

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

1
Frank Fotangs

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

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

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

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

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

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

私は.NETアプリケーション、MojoPortalと呼ばれるCMSオープンソースで同じ問題に出会いました。特定のサイトの私のテーマとスキンの1つでは、ブラウジングやテストをするときには、それが窒息しているようにグラインドして遅くなります。

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

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

0
HI360

万が一誰かがこの記事に来て同様の問題を抱えている場合。私はちょうど同様の問題を経験しましたが、解決策は非常に簡単でした。

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

0
Hideous1

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

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

nginx confへ

これは、Google 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">
0
steampowered

サーバーページのコンテンツタイプをtext/cssではなくtext/htmlに設定する必要があるからです(php、node.jsなど)。

0
Ayush Agarwal

私は同様の問題に直面していました。そして、この素晴らしいStack Overflowページで解決策を探ってください。

user54861の応答(大文字と小文字の区別で名前の不一致)が、私のコードをもう一度調べるのに好奇心をそそり、「2つのjsファイルをアップロードしてもヘッドタグにロードしなかった」と気付きました。 :-)

私がそれらをアップロードしたとき、問題は逃げます!そして、他のエラーなしにコードが実行され、ページがレンダリングされます。

だから、物語の教訓は、ページが探している場所にすべてのjsファイルがアップロードされていることを確認することを忘れないでください。

0
Hossein Khalesi

私の場合、JSPにも同じエラーが発生しました。これが私がこの問題の根源にたどり着いた方法です:私はネットワークタブに行き、CSSを取得するブラウザリクエストが "Content-type": "text/html"を持つレスポンスヘッダを返していることを明確に見ました。私は別のタブを開き、手動でcssを取得する要求を打ちました。 HTMLログをフォームで返すようになりました。私のWebアプリケーションには、path = / Tomcatサーブレットエントリ:(@WebServlet({ "/, /index", })のURLマッピングがあることがわかりました。そのため、一致しないリクエストURLは何らかの形で/と照合され、対応するサーブレットはLogをhtml形式で返していました。 /へのマッピングを削除して修正しました

また、css MIME-TYPEを処理するTomcat構成wrtもすでに存在していました。

0
Binita Bharati

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

0
captainkirk