htmlタグのintegrityは正常に動作するのにjsでcreateElementすると動かない。

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.5.0/css/all.css"
  integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU"
  crossorigin="anonymous"
/>

は動くのに

<script>
  (function() {
    var css = document.createElement('link');
    css.href = 'https://use.fontawesome.com/releases/v5.5.0/css/all.css';
    css.rel = 'stylesheet';
    css.integrity = 'sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU';
    css.crossorigin = 'anonymous';
    document.getElementsByTagName('head')[0].appendChild(css);
  })();
</script>

が動かない。

chromeではconsoleにSubresource Integrity: The resource 'https://use.fontawesome.com/releases/v5.5.0/css/all.css' has an integrity attribute, but the resource requires the request to be CORS enabled to check the integrity, and it is not. The resource has been blocked because the integrity cannot be enforced.というエラーが出る。

原因

x crossorigin
o crossOrigin

html

<script>
  (function() {
    var css = document.createElement('link');
    css.href = 'https://use.fontawesome.com/releases/v5.5.0/css/all.css';
    css.rel = 'stylesheet';
    css.integrity = 'sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU';
-    css.crossorigin = 'anonymous';
+    css.crossOrigin = 'anonymous';
    document.getElementsByTagName('head')[0].appendChild(css);
  })();
</script>

で動く。