web-dev-qa-db-ja.com

解決方法は、bootstrap.min.cssに整合性属性の問題があります

プロジェクトでbootstrapアイコンを使用しているとエラーが発生します

サブリソースの整合性：リソース ' http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css 'には整合性属性がありますが、リソースには要求がCORSは整合性のチェックを有効にしましたが、そうではありません。整合性を適用できないため、リソースがブロックされました。

誰でもこの問題を解決するのに役立ちますか？生産に移行するとき、アイコンは読み込まれません。

したがって、bootstrapアイコンに以下のリンクを使用しています

%link{:href => "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css", :integrity => "sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7", :rel => "stylesheet"}/
twitter-bootstrapcssruby-on-rails-4twitter-bootstrap-3haml
12
Nikhil Thombare

あなたがいないと思いますcrossorigin="anonymous"。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

リクエストが同一生成元ポリシーと一致しない場合、ファイルの整合性をチェックするためにcrossorigin属性が存在している必要があります。外部オリジンに整合性が設定されていて、クロスオリジンが欠落している場合、ブラウザは「フェイルオープン」を選択します。つまり、整合性属性が設定されていないかのようにリソースをロードします。

ソース

18
Schmalzy

Chrome DevTools Consoleを介してjQueryをページに挿入しようとしていたところ、このエラーが発生していました。使用していたコードは次のとおりです。

// Bad code
let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossorigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

解決策はcrossoriginをcrossOriginに変更することでした（Originの大文字のO）：

// Good code
let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);
8
Kayce Basques