【課題】

Localhostで開発中のLaravel / Reactプロジェクトから、XserverにアップロードしているWordPressサイトの記事一覧を取得したい。

CORSにより下記エラーが出た。

Access to XMLHttpRequest at 'リクエスト先URL' from origin 'リクエスト元URL' has been blocked by CORS policy: Request header field x-xsrf-token is not allowed by Access-Control-Allow-Headers in preflight response.

【解決策】

レスポンス側のheaderのAccess-Control-Allow-Headersでx-xsrf-tokenが許可されていないみたい。

レスポンス側のwordpressフォルダのfunctions.phpやwp-admin/admin-ajax.phpなどにheaderを追記してみたがうまくいかず。

.htaccessファイルに下記を追記。

<IfModule mod_headers.c>Header always append Access-Control-Allow-Headers "Origin, Accept, X-Xsrf-Token, x-requested-with"</IfModule>

検証→NetworkタブからRequest, ResponseのHeader情報が見れるので何が追加されていないのか確認して調整。

ちなみに、最初はカンマを打ち忘れていて怒られました。

Access to XMLHttpRequest at 'リクエスト先URL' from origin 'リクエスト元URL' has been blocked by CORS policy: Cannot parse Access-Control-Allow-Headers response header field in preflight response.