さくらレンタルサーバの共有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には既に
結論としては、データを提供する側で回避用のヘッダを付けます。自分が提供するデータを勝手に取られるのはまずいが、データ提供側で許可しているならブラウザも安心して取得する、という感じでしょうか。
ですので、サーバアプリ側でヘッダを追加します。
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’)][1]
.then(function (response) {
for(var i = 0; i < response.data.length; i++) {
data.push(response.data[i].xxx)
}
})
.catch(function (error) {
data.push(error);
});
という感じです。
この先は、どのようなデータを取得するか、どのような画面にするか、なので、しばらくは進められそうです。
[1]: https://xxx')