概要
GridsomeでWP REST APIをソースとして使おうとしたら躓いたので備忘録
起こったこと
ビルド時に401が返ってきてしまいコンテンツが取得できない
gridsome.config.js
module.exports = {
siteName: "Gridsome",
plugins: [
{
use: "@gridsome/source-wordpress",
options: {
baseUrl: "https://*****.com", // required
typeName: "blog",
apiBase: "wp-json",
perPage: 10,
concurrent: 1,
},
},
],
templates: {
BlogPost: "/:year/:month/:day",
},
};
$gridsome develop
Gridsome v0.7.18
Initializing plugins...
Loading data from https://*****.com
Error: Status 401 - wp/v2/types
Error: Status 401 - wp/v2/users
Error: Status 401 - wp/v2/taxonomies
Load sources - 1.66s
︙
原因
WordPress側でREST APIのアクセスに制限がかかっていた
解決策
REST APIへのアクセス設定をデフォルトアクセスに設定する
WordPressのダッシュボードからセキュリティに移動
WordPressの微調整の項目の設定からREST APIをデフォルトアクセスに変更
再度ビルド
$gridsome develop
Gridsome v0.7.18
Initializing plugins...
Loading data from https://*****.com
︙
Load sources - 295.88s
Create GraphQL schema - 1.01s
Create pages and templates - 0.15s
Generate temporary code - 0.08s
Bootstrap finish - 298.35s
DONE Compiled successfully in 4009ms 18:42:34
Site running at:
- Local: http://localhost:8080/
- Network: http://192.168.10.8:8080/
Explore GraphQL data at: http://localhost:8080/___explore
今度はエラーを吐かずにビルドができました
これでWP REST APIからコンテンツを取得することができるようになりました
終わりに
本来であれば認証が通るようにするのが正しいのですが、今回は取得の確認を行いたかったのでWordPress側の設定を変更しました
おそらくgridsome.config.jsにheaderとしてBearerを設定するのがセキュリティ的に正解……のハズ
参考
WP REST API 認証 このページ崩れてるのって僕だけですかね?
Rest API restriction
Restrict WordPress REST API Access