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

関連記事

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

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

Visual Studio Codeの検索と置換

Visual Studio Codeの検索と置換

【videoタグ】HTMLでWebサイトに動画を埋め込む

【videoタグ】HTMLでWebサイトに動画を埋め込む

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

【NOプラグイン】jQueryで表示領域に入ったら開始するスクロールアニメーションの実装

jQueryでheaderとfooterを共通化する【load()メソッド】

jQueryでheaderとfooterを共通化する【load()メソッド】

Underscore.jsについて学ぶ

Underscore.jsについて学ぶ