如何解决在bootstrap.min.css上有完整性属性问题

Question

我在我的项目中使用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"}/

Answer 1

我想你错过了crossorigin="anonymous".

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

当请求与Same Origin Policy不匹配时,必须存在crossorigin属性以保证要检查的文件的完整性.如果在外部源上设置了完整性并且缺少crossorigin,则浏览器将选择"fail-open",这意味着它将加载资源,就像未设置integrity属性一样.

资源

Answer 2

我试图通过Chrome DevTools控制台将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(原点的大写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);