備忘録

【JavaScript】CORSエラーの盲点【element.crossorigin=’anonymous’ではない】

間違いのコード

JavaScriptでこのように書いて、少しハマってしまいました。

const element = document.createElement('link');
element.href = 'resource.css';
element.rel = 'stylesheet';
element.crossorigin = 'anonymous';
document.head.appendChild(element);

正しいコードはこちら

違いが分かりますか?

const element = document.createElement('link');
element.href = 'resource.css';
element.rel = 'stylesheet';
element.crossOrigin = 'anonymous';
document.head.appendChild(element);

正解は4行目。

間違いのコードはcross”o”rigin、正解のコードはcross”O”riginです。

ちなみに、htmlタグに属性として記述する場合は小文字(crossorigin)です。

<script src="https://other.com/resource.css" crossorigin="anonymous">

JavaScriptの命名はキャメルケースなので注意が必要ですね。

それでも取得できない場合

Access-Control-Allow-Originヘッダは適切に指定されていますか?

参考:Access-Control-Allow-Origin – HTTP | MDN

参考

javascript – How do I add the “crossorigin” tag to a dynamically loaded script? – Stack Overflow