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

関連記事

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

セクションごとにスクロールできるjQueryプラグインのScrollify.jsを解説

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

次世代画像フォーマットWebPでサイトの表示速度を改善しよう!

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

【modal-video.js使い方】YouTube、Vimeoをポップアップ再生する方法

react-scrollでページ内スクロールが効かない時と複数ページの対応

react-scrollでページ内スクロールが効かない時と複数ページの対応

【総まとめ】WebサイトにYouTube動画を埋め込む方法

【総まとめ】WebサイトにYouTube動画を埋め込む方法

【Adminer】Local by Flywheelでデータベースを操作しよう

【Adminer】Local by Flywheelでデータベースを操作しよう