質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Google App Engine

Google App Engineは、Googleの管理するデータセンター上でウェブアプリケーションの開発が可能なクラウドコンピュータ技術です。Java、Python、Go用にSDKが用意されています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

970閲覧

GAE+Nuxt(SSR)+WP REST APIがうまく動いてくれない。QiitaのAPIなら動くのに。(・・)

nlnnlnlnl

総合スコア12

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Google App Engine

Google App Engineは、Googleの管理するデータセンター上でウェブアプリケーションの開発が可能なクラウドコンピュータ技術です。Java、Python、Go用にSDKが用意されています。

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2019/04/26 02:39

前提・実現したいこと

GAE+Nuxt(SSR)+WP REST API。

発生している問題・エラーメッセージ

asyncDataで記事の取得・表示はできたのですが、ソースを見ると「Server error」になってしまいます。
また、該当ページをリロードすると、記事の取得・表示に失敗(Server error)してしまいます。

Server error An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details.

該当のソースコード

Nuxt

1async asyncData({ $axios }) { 2 const postsdata = await $axios.get('https://xxxxxxxxxxx/wp-json/wp/v2/posts?_embed&page=1') 3 return { 4 posts: postsdata.data, 5 headers: postsdata.headers 6 } 7 }

※「headers」はページャーの実装のために取得しています。

試したこと

GAEに原因があるのかも、と思い、herokuにデプロイして試しました。が、同じ問題が起きました。
REST APIに原因があるのかも、と思い、QiitaのAPIに接続してみたところ、API部分のソースも返ってくるしリロードしても問題なく表示されるようでした。
なので、WP REST APIに問題ありなのかな?と。

質問したいこと

まず、解決策が知りたいです。
ただ、それ以上に「QiitaのAPIなら正常に動くのになぜWPだとうまく動かないのか」ということに興味があります。そんなことがありえるのでしょうか?不思議です。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

CHERRY

2019/04/26 06:00

Webブラウザで WP REST API にアクセスして、Webブラウザのデベロッパーツールのコンソールに なにかメッセージが出ていたりしないでしょうか?  WordPress サーバーのログには、なにかメッセージはでていませんか?
nlnnlnlnl

2019/04/26 08:19

ブラウザのコンソールにて、 Content Security Policy: ページの設定により次のリソースの読み込みをブロックしました: https://xxxxxxxxxxxx/favicon.ico (“default-src”) というエラーメッセージが出ていました。 WordPress サーバーのログには、これといったメッセージはありませんでした。
nlnnlnlnl

2019/04/26 12:10

CSP...。特に覚えはないです。。 WP側のサーバーでGAE側のドメインを許可する必要があるのでしょうか?
guest

回答1

0

自己解決

わかりました。わかりましたよ・・・。自己解決しました。

CHERRYさんのおかげで、WP側のセキュリティ設定を疑うことができました。
本当にありがとうございます。

原因

原因はエックスサーバーのWordPressセキュリティ設定でした。
https://www.xserver.ne.jp/manual/man_server_wpsecurity.php

エックスサーバーのWordPressセキュリティ設定に「REST API アクセス制限」というものがあるのですが、これはデフォルトでは「有効(ON)」になっています。

これをOFFにすることで、GAEのSSRによるAPI連携が通りました!パチパチー

ちなみに、「REST API アクセス制限」とは、REST APIに対する国外IPアドレスからの接続を制限するものだそうです。

よって、現時点では、こういう解釈になります。
(違ってたらご指摘いただきたい)

REST API アクセス制限がONのままだと・・・

・GAEのIPアドレスが海外だからSSRでAPI繋がらない
・ローカル開発環境(localhost:3000)ならSSRでAPI繋がる(ローカル開発環境は国内だから)
・CSRならばGAEでもAPI繋がる(←なんで?)

REST API アクセス制限をOFFにすると・・・

・GAEでCSRでもSSRでもAPI繋がる
・ローカル開発環境でももちろん繋がる

で、ここで新たな疑問。

GAEでアプリケーションを立てた時に、リージョンを「asia-northeast1」にしました。
これは、「東京リージョン」だと聞いてるんですが、だとしたらIPアドレスは国内になるんじゃないのか?なぜエックスサーバーに弾かれるんだ?というのが疑問です。

リージョンが東京だからって、IPアドレスが国内とは限らないということなのでしょうか?

ちょっとこの辺がよくわからない。
これから勉強していきたいと思います。

なにはともあれ、ありがとうございました。

投稿2019/04/27 04:11

nlnnlnlnl

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問