Home
Three.js
画像のみにAccess-Control-Allow-Originを設定する方法

画像のみにAccess-Control-Allow-Originを設定する方法

画像のみにAccess-Control-Allow-Originを設定する方法

どうも!かけちまるです!

WP REST APIで外部サイトから記事画像を取得し、Three.jsでテクスチャとして使う際に、Access-Control-Allow-Origin関連のエラーがでたのでその解決方法を解説します。

この記事では、

  • ・エラーの解決方法
  • ・Access-Control-Allow-Originの確認方法

がわかります。

どのようなエラーが出ているか

WP REST APIでWordPressから記事画像を取得し、Three.jsでテクスチャとして使おうとした時にAccess-Control-Allow-Origin関連のエラーがでてしまいました。

エラーの確認

クロスドメイン参照をクライアント側とサーバー側で許可しないといけないためです。
Three.jsでは、デフォルトでクロスドメイン参照を許可しているのでサーバー側の対応が必要かなというところです。

エラー解決方法

WordPressが設置されているサーバーにある.htaccessに次のコードを追加します。

.htaccess
開く&閉じるコピー
<IfModule mod_setenvif.c> <IfModule mod_headers.c> <FilesMatch "\.(bmp|cur|gif|ico|jpe?g|png|svgz?|webp)$"> Header set Access-Control-Allow-Origin "*" </FilesMatch> </IfModule> </IfModule>

Access-Control-Allow-Originが設定されているか確認する方法

画像にAccess-Control-Allow-Originが設定されているか確認する方法を解説します。

開発者ツールでNetworkタブを開きます。
それから、該当画像を選択して、さらにHeadersタブを開きます。
その中にAccess-Control-Allow-Origin項目があれば設定されていることになります。

Access-Control-Allow-Originが設定されているか確認

おわり

かけちまる
かけちまる
Webエンジニアをしています。
HTML/CSS/JavaScript/jQuery/PHPができます。
WEB制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

CSSだけでぷよぷよしたアニメーションの実装方法

CSSだけでぷよぷよしたアニメーションの実装方法

gsapのstaggerで順番にアニメーションさせる方法

gsapのstaggerで順番にアニメーションさせる方法

【Three.js】マウスにライトを追従させる方法

【Three.js】マウスにライトを追従させる方法

Contact Form 7の基本設定

Contact Form 7の基本設定

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【Macユーザー向け】ngrokでローカル環境のサイトを外部へ公開

【jQuery】順番に要素が出てくるアニメーション

【jQuery】順番に要素が出てくるアニメーション