MIMEタイプの不一致が原因でリソースがブロックされました（X-Content-Type-Options：nosniff）

JavaScriptとHTMLを使用してWebページを開発していますが、HTMLページから次のエラーリストを受け取ったときは、すべてが正常に機能していました。

The resource from “https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

これらのエラーは、ブラウザの自動更新（Mozilla Firefox）の後に表示されましたが、セットアップで何かが変更された可能性があります。この問題を解決する方法を知っていますか？

ファイルパスが正しく、ファイルが存在するかどうかを確認します-私の場合は問題でした-修正すると、エラーが消えました

これは、URLを変更することで修正できます。例：悪い例：

https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8

良い例：

https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8

rawgit.comは、githubのキャッシングプロキシサービスです。そこに移動して、元のraw.githubusercontent.comURLに対応するURLをインタラクティブに導出することもできます。FAQを見る

devopsチームがを追加してウェブサーバーの構成を変更した後、本番環境でこのエラーに直面し始めましたX-Content-Type-Options: nosniff。これによりcontent-type、応答ヘッダーのパラメーターで言及されているように、ブラウザーはリソースを解釈することを余儀なくされました。

さて、最初から、アプリケーションサーバーはjsファイルのcontent-typeを明示的に設定していましたtext/plain。X-Content-Type-Options: nosniffはウェブサーバーに設定されていないため、コンテンツタイプはテキスト/プレーンとして言及されていましたが、ブラウザは自動的にjsファイルをJavaScriptファイルとして解釈していました。これは、MIMEスニッフィングと呼ばれます。X-Content-Type-Options：nosniffを設定した後、ブラウザーはMIMEスニッフィングを実行せず、応答ヘッダーに記載されているコンテンツタイプを取得するように強制されました。このため、jsファイルをプレーンテキストファイルとして解釈し、実行を拒否するか、ブロックしました。同じことがエラーにも表示されます。

解決策：サーバーcontent-typeにJSファイルのを次のように設定させることです

application/javascript;charset=utf-8

このようにして、すべてのJSファイルが正常に読み込まれ、問題が解決されます。

パスを確認してください。指定されたパスにファイルが存在しない場合、このエラーが発生します。

Expressを使用していますか？

パスを確認してください（// public /の後の「」に注意してください）：

app.use(express.static(__dirname + "/public/"));

//注：「css」の前に「/」はすでに含まれているため、必要ありません。

rel="stylesheet" href="css/style.css

お役に立てれば

Wordpressの場合

私の場合、get_template_directory_uri（）の後にスラッシュ「/」を見逃したため、結果/生成されたパスが間違っていました：

私の間違ったコード：

wp_enqueue_script( 'retina-js', get_template_directory_uri().'js/retina.min.js' ); 

私の修正したコード：

wp_enqueue_script( 'retina-js', get_template_directory_uri().'/js/retina.min.js' );

これは、ブラウザがファイルにアクセスできないことが原因である可能性があります。node.jsでアプリケーションを作成するときに、このタイプのエラーに遭遇しました。スクリプトファイルを直接要求して（URLをコピーして貼り付ける）、それを取得できるかどうかを確認できます。そうすれば、本当の問題が何であるかがわかります。ファイルが置かれているフォルダの許可が原因であるか、ファイルへのパスが正しくないためにブラウザがファイルを見つけられない可能性があります。node.jsでは、ファイルへのルートを指定した後、すべてが機能します。

それは間違った道かもしれません。メインのアプリファイルで次のことを確認してください。

app.use(express.static(path.join(__dirname,"public")));

次のようなCSSへのリンクの例：

<link href="/css/clean-blog.min.css" rel="stylesheet">

jsファイルへのリンクについても同様です。

<script src="/js/clean-blog.min.js"></script>

jsファイルの文字セットをBOMなしのUTF-8からNotepad ++の単純なUTF-8に変更することで、この問題を解決しました。

Azureストレージを静的Webサイトとして使用しているときにこのエラーが発生しました。コピーされたjsファイルのコンテンツタイプはとしてtext/plain; charset=utf-8で、コンテンツタイプをに変更しました。application/javascript

それは働き始めました。

プロトコルHTTPSおよびHTTPについてはを参照してください

混合プロトコルを使用している場合[これは主にJSONPコールバックで発生します]、このエラーが発生する可能性があります。

Webページとリソースページの両方に同じHTTPプロトコルがあることを確認してください。

djangoサーバーでも同じ問題に直面しているので、settings.pyファイルでDEBUG = Trueを変更しました

それは間違ったタグのために私に起こりました。誤ってjsファイルを追加しましたlinkタグ。

例:(間違ったもの）

<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.js">

の正しいタグを使用することで解決しましたjavascript。例：

<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

https://cdn.rawgit.comはシャットダウンしています。したがって、代替オプションの1つを使用できます。JSDeliverは、使用できる無料のcdnです。

// GitHubのリリース、コミット、またはブランチをロードします

//注：npmをサポートするプロジェクトにはnpmを使用することをお勧めします

https://cdn.jsdelivr.net/gh/user/repo@version/file

// jQueryv3.2.1をロードします

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js

//特定のバージョンの代わりにバージョン範囲を使用する

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

//バージョンを完全に省略して、最新のものを取得します

//これを本番環境で使用しないでください

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// JS / CSSファイルに「.min」を追加して、縮小バージョンを取得します

//存在しない場合は、生成します

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

//最後に/を追加して、ディレクトリリストを取得します

https://cdn.jsdelivr.net/gh/jquery/jquery/

ref- https：//www.jsdelivr.com/？ docs = gh