WordPress REST APIにCORSを設定する方法【シンプル解説】

はじめに

WordPress REST APIを外部のフロントエンド（例：Next.js、Vue.js）から利用する際、CORS（Cross-Origin Resource Sharing） の設定が必要になることがあります。デフォルトでは、異なるオリジン（ドメイン）からのリクエストはブロックされるため、適切に設定しないとAPIが利用できません。

本記事では、WordPressのCORSを設定する方法 をシンプルに解説します。

1. WordPressにCORSを設定する方法

1.1. functions.php にCORSを追加する

WordPressのテーマまたは子テーマの functions.php に以下のコードを追加します。

function add_cors_http_header() {
 header("Access-Control-Allow-Origin: https://frontend.com"); // 許可するオリジンを指定
 header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
 header("Access-Control-Allow-Headers: Content-Type, Authorization");
}
add_action('rest_api_init', function () {
 add_action('send_headers', 'add_cors_http_header');
});

解説

• Access-Control-Allow-Origin：許可するオリジンを指定（* にすると全オリジン許可）
• Access-Control-Allow-Methods：許可するHTTPメソッドを指定
• Access-Control-Allow-Headers：送信可能なヘッダーを指定（認証が必要な場合は Authorization も追加）

この設定を行うことで、指定したオリジン（例：https://frontend.com）からWordPressのAPIにアクセスできるようになります。

2. フロントエンド（Axios）でのリクエスト実装

CORSを設定したら、フロントエンドからAPIを呼び出すためのコードを実装します。

2.1. Axiosのインスタンスを作成

以下のように、Axiosの設定を行います。

import axios from "axios";

export const axiosTomoshibiInstance = axios.create({
 baseURL: "https://example.com", // WordPressのURL
 headers: {
 "Content-Type": "application/json",
 "X-Requested-With": "XMLHttpRequest",
 },
 withCredentials: true,
});

2.2. WordPress APIから記事を取得する関数

Axiosを利用して、WordPressのREST APIから記事を取得する関数を作成します。

import { WP_REST_API_Posts } from "wp-types";
import { axiosTomoshibiInstance } from ".";

export const fetchPostsByTagId = async ({
 tagId,
}: {
 tagId: string | string[];
}): Promise<{ posts: WP_REST_API_Posts }> => {
 const TAG_NUMBER = Array.isArray(tagId) ? tagId.join(",") : tagId;

 const fetchedPosts = await axiosTomoshibiInstance.get<WP_REST_API_Posts>(
 `/wp-json/wp/v2/posts?tags=${TAG_NUMBER}`
 );

 return { posts: fetchedPosts.data };
};

解説

• axiosTomoshibiInstance.get() を使って wp-json/wp/v2/posts から記事を取得
• tags=${TAG_NUMBER} で特定のタグに紐づく記事を取得
• 取得したデータを posts として返す

3. CORSの設定をテストする方法

3.1. フロントエンドの開発環境でAPIを呼び出す

フロントエンドのコンポーネント内で、CORSが適用されたAPIを呼び出してみます。

import { useEffect, useState } from "react";
import { fetchPostsByTagId } from "./api";

export default function BlogPosts({ tagId }) {
 const [posts, setPosts] = useState([]);

 useEffect(() => {
 fetchPostsByTagId({ tagId }).then((data) => setPosts(data.posts));
 }, [tagId]);

 return (
 <div>
 <h2>Blog Posts</h2>
 <ul>
 {posts.map((post) => (
 <li key={post.id}>{post.title.rendered}</li>
 ))}
 </ul>
 </div>
 );
}

3.2. cURLを使ってCORSを確認

ターミナルで以下のコマンドを実行し、レスポンスヘッダーを確認します。

curl -H "Origin: https://frontend.com" -I "https://example.com/wp-json/wp/v2/posts"

期待するレスポンスヘッダー：

Access-Control-Allow-Origin: https://frontend.com

これが表示されていれば、CORSの設定は正しく適用されています。

4. まとめ

WordPress REST APIにCORSを設定する方法を解説しました。functions.php に適切なコードを追加することで、特定のオリジンからのアクセスを許可できます。

セキュリティリスクを避けるために、Access-Control-Allow-Origin: * ではなく、許可するオリジンを明示的に指定 しましょう。