Resource interpreted as Stylesheet but transferred with MIME type text/plain のエラーの対処法

公開日:2018-12-10
最終更新:2018-12-10
※この記事は外部サイト(https://qiita.com/drafts/e698e5d99152577b5...)からのクロス投稿です

エラー状況

Herokuにこんなサービスをアップしています。(メルカリだけ使えないので対応中です)
AWSに、unicorn + nginx + capistranoを使用し、こちらの記事を参考に作業を進め、ブラウザからアクセスすることに成功しました。
しかし、CSSが反映されていませんでした・・・JSや画像は読み込めておりasset周りに問題はなさそう。実際に検証画面からNetworkタブを見てみても、間違いなくCSSやJSや画像が読み込まれている・・・なのにCSSだけ反映されていない、そんな状況でした。

ConsoleにWarningが出ていた

検証画面のConsoleには、記事タイトルのワーニング:Resource interpreted as Stylesheet but transferred with MIME type text/plain が出ていました。
ローカルでサービスを起動してみても出てきましたが、Herokuにアクセスした場合はワーニングが出てこなかったので、ここが悪さをしているのではないか・・・

nginxのmime.typesが読み込めていなかった

Webサービス用のnginx設定ファイルがあるのですが、その中に以下のmime.types読み込みの設定をすることで解消できました。設定場所は、httpブロックの中です。

http {  

    include  mime.types;  

}  

nginx用のconfファイルには上記が最初から記入してあり、下記のように、webサービス用のconfをIncludeする設定が含まれていました。

http {  

    include  mime.types;  

    include /etc/nginx/conf.d/*.conf;  

}  

そのため、nginx.confを読み込んでからwebservice.confを読み込む・・・問題ないな!と勘違いしていました。実際は調べたところ、webservice.confのみが読み込まれており、mime.typesのincludeは反映されていなかったので、追記してみたところ解消した次第です。
一緒に解決法を探してくださったAmazon Loftの技術者の方ありがとうございました。

このエラーの解消法は探しても見当たらなかったので記事にしてみました。
誰かのお役に立てれば幸いです。

記事が少しでもいいなと思ったらクラップを送ってみよう!
0
+1
作ったもの、プログラミングで共有できそうなこと、IT関連でやってみたことなど、なんでも書いていきます。ヤドン可愛い

よく一緒に読まれている記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる

技術ブログをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

技術ブログを開設する

Qrunchでアウトプットをはじめよう

Qrunch(クランチ)は、ITエンジニアリングに携わる全ての人のための技術ブログプラットフォームです。

Markdownで書ける

ログ機能でアウトプットを加速

デザインのカスタマイズが可能

技術ブログ開設

ここから先はアカウント(ブログ)開設が必要です

英数字4文字以上
.qrunch.io
英数字6文字以上
ログインする