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

関連記事

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

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

【PHP】配列の要素の数を取得する

【PHP】配列の要素の数を取得する

【Three.js基礎】概念の理解と立方体の実装

【Three.js基礎】概念の理解と立方体の実装

Underscore.jsについて学ぶ

Underscore.jsについて学ぶ

【基本】Local by FlywheelでWordPressをローカルに構築する

【基本】Local by FlywheelでWordPressをローカルに構築する

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

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