さくらレンタルサーバの共有SSL（続き）

さくらにテストサイトを立てて、データもコピーします。
あまり作りこんでいない段階でしたら、普通に、DB新規作成→WordPressをインストール→データエクスポート・インポートでやっても大した手間ではありません。

そして、共有SSLの設定は簡単です。
https://help.sakura.ad.jp/hc/ja/articles/206054862–%E5%85%B1%E6%9C%89SSL-%E8%A8%AD%E5%AE%9A%E6%96%B9%E6%B3%95

これにより、「the content must be served over HTTPS.」のエラーは解消します。

MonacaアプリがさくらサーバからJSON取得する場合のCORS対応

次は、予想通りではありますが、「No ‘Access-Control-Allow-Origin’ header is present on the requested resource.」エラーになります。
※ちなみに、この辺のエラーは、Chromeデベロッパーツール（F12キー）で確認します。

個人的には、これの対応についての情報も分かりにくかったです。

これは、ブラウザ側の制約だ、ということで、それを回避するのは、クライアント側アプリだと考えました。
しかし、config.xmlには既に<access origin=”*”/>の記述があるので、これで回避できていないとおかしいのでは、とかなり悩みました。

結論としては、データを提供する側で回避用のヘッダを付けます。自分が提供するデータを勝手に取られるのはまずいが、データ提供側で許可しているならブラウザも安心して取得する、という感じでしょうか。

ですので、サーバアプリ側でヘッダを追加します。
PHP・WordPress記述なので、こんな感じです。（$wpdb->get_results　が好き）

$rows = $wpdb->get_results($sql);
if ($rows) {
$json_data = json_encode($rows);
}
header(‘Access-Control-Allow-Origin: *’);
header( ‘Content-Type: application/json; charset=utf-8’ );
echo $json_data;

これにより、CORS制約も回避されました。

Monaca（Vue）でのJSON取得処理

これで、データが取得されましたので、あとは画面で使うように加工します。
ここも、まあまあ苦労しましたが、

var data = [];
・・・
axios.get(‘https://xxx’)
.then(function (response) {
for(var i = 0; i < response.data.length; i++) {
data.push(response.data[i].xxx)
}
})
.catch(function (error) {
data.push(error);
});

という感じです。

この先は、どのようなデータを取得するか、どのような画面にするか、なので、しばらくは進められそうです。