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制作を中心に日々学びになったこと、興味が沸いたことについて初心者の方でもわかりやすいようにアウトプットしていくブログです。

関連記事

【メンテナンス画面】LightStartの設定方法とデザインカスタマイズ

【メンテナンス画面】LightStartの設定方法とデザインカスタマイズ

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【コーディング効率化】VSCodeにコードスニペットを登録しよう

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

【基本編】JavaScriptのマウスイベントでドラッグ&ドロップ機能を実装する

【’関数名’ is not defined】TypeScriptでHTMLイベント属性を使う時の対処法

【’関数名’ is not defined】TypeScriptでHTMLイベント属性を使う時の対処法

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

【GSAP】タイムラインを使えば複雑なアニメーションを実装できる

floatで雑誌のようなテキストの回り込みを表現する

floatで雑誌のようなテキストの回り込みを表現する