私はこの問題を抱えています。 Chromeは引き続きこのエラーを返します
リソースはスタイルシートとして解釈されますが、MIMEタイプtext/htmlで転送されます
このエラーの影響を受けるファイルは、Style、selected、およびjquery-gentleselectです(同じ方法でインデックスにインポートされた他のCSSファイルでもエラーは発生しません)。私はすでに自分のMIMEタイプをチェックしており、text/cssはすでにCSS上にあります。
正直なところ、私は問題を理解することから始めたいのです(私は一人ではできないようなこと)。
問題を理解することから始めたいのですが
ブラウザはサーバーにHTTPリクエストを送信します。その後、サーバーはHTTP応答を行います。
リクエストとレスポンスはどちらも、たくさんのヘッダと、内容を含んだ(オプションの)ボディで構成されています。
本文がある場合、ヘッダの1つは本文が何であるかを記述するContent-Type
です(それはHTML文書ですか?画像ですか?フォーム送信の内容?など)。
スタイルシートを要求すると、サーバーはブラウザに、それがスタイルシート(Content-Type: text/html
)ではなくHTML文書(Content-Type: text/css
)であることを伝えています。
Myme.typeとtext/cssはすでにcssに入っています。
それからあなたのサーバーに関する何か他のものがそのスタイルシートに間違ったコンテントタイプをつけさせています。
ブラウザの開発者ツールの[ネット]タブを使用して、要求と応答を調べます。
Angularを使う?
これは覚えておくべき非常に重要な警告です。
ベースタグは、頭の中だけでなく正しい位置にある必要があります。
私は私のベースタグを頭の中の間違った場所に持っていました、それはURLリクエストを持つタグの前に来るべきです。基本的にタイトルの下に2番目のタグとして配置することで解決しました。
<base href="/">
ここにちょっとした記事を書いた ここ
私もこのエラーに問題があり、解決策を思いついた。これでエラーが発生した理由は説明できませんが、場合によっては修正するようです。
CSSファイルへのパスの前にスラッシュ/を含めます。
<link rel="stylesheet" href="/css/bootstrap.min.css">
これを試してください<link rel="stylesheet" type="text/css" href="../##/yourcss.css">
ここで、##
はあなたのフォルダ、あなたの.CSSファイルです。
:..
(二重ドット)を忘れないでください。
私も同じ問題に直面していました。そしていくつかの研究開発をした後、私は問題がファイル名にあることがわかりました。実際のファイルの名前は "lightgallery.css"ですが、リンク中に "lightGallery.css"と入力しました.
詳細情報:
それは私のローカルホスト(OS:Windows 8.1&Server:Apache)でうまくいった。しかし、私が自分のアプリケーションをリモートサーバ(私のlocalhostとは異なるOSとWebサーバ)にアップロードしたときにはうまくいかず、あなたと同じエラーが発生しました。
そのため、問題はサーバーの大文字と小文字の区別(ファイル名に関して)でした。
Angularを使う
私の場合はhref
の代わりにng-href
を使うことで解決しました。
注:
私はバックエンドとしてlaravelを使っています
私は同じことに直面していました、かわいい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" />
JSPを使用している場合、この問題はサーブレットマッピングに起因する可能性があります。あなたのマッピングがこのようにデフォルトでurlを取るならば:
@WebServlet("/")
その後、コンテナはあなたのcss URLを解釈し、cssファイルではなくサーブレットに行きます。
私は同じ問題を抱えていた、私は私のマッピングを変更し、今やすべての作品
私はフォーム認証を使用しているMVC4で同様の問題を抱えています。問題はweb.configのこの行でした、
<modules runAllManagedModulesForAllRequests="true">
これは、静的コンテンツを含むすべての要求が認証されることを意味します。
この行を次のように変更します。
<modules runAllManagedModulesForAllRequests="false">
私は、OPの中でTodd Rのポイントを詳しく説明したいと思います。 asp.netページでは、web.config
ファイルはアプリケーションの各ファイルまたはフォルダにアクセスするために必要な権限を定義します。私たちの場合、CSSファイルのフォルダは許可されていないユーザにアクセスを許可していなかったので、ユーザが許可される前にログインページで失敗しました。 web.config
で必要な権限を変更することで、権限のないユーザがCSSファイルにアクセスすることを許可し、この問題を解決しました。
nodejsとexpressexpressを使用すると、以下のコードが動作します。
res.set('Content-Type', 'text/css');
ReactJを使ってindex.htmlにスタイルファイルを追加するときは、
<link rel="stylesheet" href="./css/style.css">
それから私はルートを言うにナビゲートします。 localhost:3000/artist
を更新すると、エラーが発生します。
相対リンクを絶対リンクに置き換えた後、エラーは消えました。
<link rel="stylesheet" href="http://localhost/project/public/css/style.css"
。
最初に正しいヘッダーを送信するのを忘れたため、同じエラーが発生しました
header("Content-type: text/css; charset: UTF-8");
print 'body { text-align: justify; font-size: 2em; }';
NpmでインストールしたReactレイアウトモジュールのCSSをロードすると、この問題が発生しました。このモジュールを実行するには、2つの.cssファイルをインポートする必要があるため、最初に次のようにインポートしました。
@import "../../../../node_modules/react-grid-layout/css/styles.css";
しかし、ファイル拡張子を削除する必要があることがわかったので、これはうまくいきました:
@import "../../../../node_modules/react-grid-layout/css/styles";
私は.NETアプリケーション、MojoPortalと呼ばれるCMSオープンソースで同じ問題に出会いました。特定のサイトの私のテーマとスキンの1つでは、ブラウジングやテストをするときには、それが窒息しているようにグラインドして遅くなります。
私の問題はCSSの "type"属性ではありませんでしたが、それは "それ以外のもの"でした。私の正確な変更はWeb.Configにありました。 MinifyCSS、CacheCssOnserver、およびCacheCSSinBrowserのすべての値をFALSEに変更しました。
それが設定されると、Webサイトは本番環境ではまた迅速になりました。
万が一誰かがこの記事に来て同様の問題を抱えている場合。私はちょうど同様の問題を経験しましたが、解決策は非常に簡単でした。
開発者が誤ってweb.configのコピーをCSSディレクトリにドロップしました。削除すると、すべてのエラーが解決され、ページが正しく表示されます。
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">
サーバーページのコンテンツタイプをtext/cssではなくtext/htmlに設定する必要があるからです(php、node.jsなど)。
私は同様の問題に直面していました。そして、この素晴らしいStack Overflowページで解決策を探ってください。
user54861の応答(大文字と小文字の区別で名前の不一致)が、私のコードをもう一度調べるのに好奇心をそそり、「2つのjsファイルをアップロードしてもヘッドタグにロードしなかった」と気付きました。 :-)
私がそれらをアップロードしたとき、問題は逃げます!そして、他のエラーなしにコードが実行され、ページがレンダリングされます。
だから、物語の教訓は、ページが探している場所にすべてのjsファイルがアップロードされていることを確認することを忘れないでください。
私の場合、JSPにも同じエラーが発生しました。これが私がこの問題の根源にたどり着いた方法です:私はネットワークタブに行き、CSSを取得するブラウザリクエストが "Content-type": "text/html"を持つレスポンスヘッダを返していることを明確に見ました。私は別のタブを開き、手動でcssを取得する要求を打ちました。 HTMLログをフォームで返すようになりました。私のWebアプリケーションには、path = /
Tomcatサーブレットエントリ:(@WebServlet({ "/, /index", })
のURLマッピングがあることがわかりました。そのため、一致しないリクエストURLは何らかの形で/
と照合され、対応するサーブレットはLogをhtml形式で返していました。 /
へのマッピングを削除して修正しました
また、css MIME-TYPEを処理するTomcat構成wrtもすでに存在していました。
私は古いMEANスタックプロジェクトの作業を再開しながら同じ問題に遭遇しました。私はローカル開発サーバーとしてnodemon
を使用していましたが、同じエラーResource interpreted as stylesheet but transferred with MIME type text/html
を受け取りました。ここで見つけることができる nodemon
からhttp-server
に変更しました 。すぐにうまくいきました。