twitter-bootstrap - 如何解决“资源要求请求启用 CORS……资源已被阻止，因为无法强制执行完整性”错误

Question

我在我的项目中使用引导图标，这给了我错误

子资源完整性：资源“ http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css ”具有完整性属性，但该资源需要启用 CORS 以检查完整性，事实并非如此。资源已被阻止，因为无法强制执行完整性。

谁能帮我解决这个问题，当我们开始生产时，图标没有加载。

所以我使用下面的链接作为引导图标

%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">

当请求与同源策略不匹配时，必须存在跨域属性才能检查文件的完整性。在外部源上设置完整性并且缺少跨源时，浏览器将选择“失败打开”，这意味着它将加载资源，就好像没有设置完整性属性一样。

来源

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 代表 Origin）：

// 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);