WP-API(JSON REST API)はデフォルトでは同一ドメインからしかAjaxで取得できません。

ただHTML5のSAPを作るときとかには別ドメインからでも取得できるようにしないとなので、ちょっと調べてみました。

後半にWP-APIでJSONPを使う方法も軽くまとめています。

wp_headersフックでヘッダーを書き換える

とりあえずググってみたら、localhostから利用できるようにしたコードがありました。

WordPressでJSON REST API (WP API) のテスト用にレスポンスヘッダを追加する
[php]
function add_allow_header( $headers ) {
if ( ! is_admin() ) {
$headers[‘Access-Control-Allow-Origin’] = ‘https://localhost’;
$headers[‘Access-Control-Allow-Credentials’] = ‘true’;
return $headers;
}
}
add_filter( ‘wp_headers’, ‘add_allow_header’ );
[/php]

「https://localhost」を必要に応じて書き換えればとりあえず使えそうな雰囲気です。

WP-APIのヘッダーのみ書き換える

ただこのままだとWP-API以外のページについても「Access-Control-Allow-Origin」が書き換わってしまっているので、WP-API限定になるように調整します。

調整したもの

[php]
function add_allow_header( $headers ) {
global $wp;
if (preg_match (‘/wp-json/’,$wp->request)) {
$headers[‘Access-Control-Allow-Origin’] = ‘*’;
$headers[‘Access-Control-Allow-Credentials’] = ‘true’;
return $headers;
}
}
add_filter( ‘wp_headers’, ‘add_allow_header’ );
[/php]

グローバル変数の「wp」内にリクエストURLが入っているので、リクエストURLに「wp-json」が含まれるか否かを判定するようにしてみました。

サンプルなので「＊（全許可）」になってますが、ここを変数にして管理画面から許可するドメインを指定できるようにすると業務でも使えそうかなと思います。

もっとも、そこまでせずともおとなしくJSONP使えって話もあるんですが、あっちはあっちで現行のバージョン（1.1）では不具合があって使えなかったりします。

参考：WP-API1.2以前でJSONPを利用するための手作業アップデート覚書

個人的にWP-APIのコア実装を心待ちにしているので、今後の動向に注目しつつ色々と気づいたことを紹介するようにします。