monaca(Cordova 10)でwordpressのRESTAPI(json)を使用し、iOS実機にも取得内容を一覧表示したい。

Question

前提・実現したいこと

monaca(Cordova 10)でwordpressのRESTAPI(json)を使用し、iOS実機にも取得内容を一覧表示したい。

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

iOSのアプリをAppStoreに公開しようとしたところ、2021.4.26よりiOS14SDK以降のバージョンを利用
とのwarningが出たため、monacaのcordovaを9から10に更新しました。
jQueryで取得しており、プレビュータブでは正しく取得ができていますが、
実機では表示されません。
特にエラーも表示されておりません。
ただ、正しく取得できている場合は、getJSON後のconsole.logが表示されていますが、
iOS実機の場合、console.logが表示されていません。
(取得成功も取得エラーも表示されていない状態です)

該当のソースコード

    const baseurl = 'https://domain/';
    var getWPList = function() {
        var REST_URL = baseurl + "wp-json/wp/v2/tournament/"; //wordpress側のカテゴリの一覧
        var aryWPRace = [];
        
        $.getJSON( REST_URL, function(results) {
          console.log('after getJSON');
          if (results) {
            $.each(results, function(i, item) {
              var cat_name     = item.name;
              $('#top_list').append(
                '<p>' + cat_name + '</p>'
              );
            });
          } else {
            $('#top_list').append(
                '<p>取得エラー</p>'
            );
          }
        });
    }
    getWPList();

試したこと

１）実機のsafariで上記URLを指定し、jsonが取得できるか？==>OK
２）wordpress以外の外部restAPIが取得できるか？==>郵便番号検索APIで実験==>OK
３）検証方法
プレビュー==>OK(表示される）
デバッグビルド==>NG(表示されない)
シミュレータビルド==>NG
monacaデバッガー==>NG

ちなみに、Androidの方は実機でも正しく取得ができています。

補足情報（FW/ツールのバージョンなど）

monacaの開発環境：IDE
cordovaのバージョン：9->10
<その他>
NCMBのpush通知機能あり。onsenUIの利用あり。
onsenUIやangularについては、cordova10へのバージョンアップと同時に
ヘルプに記載のバージョンアップを行い、エラー等を解消しています。
wordpressのサーバ:xserver

ご存知の方がおりましたら、iOSの実機でも正しく取得できる方法をご教授いただけないでしょうか？
よろしくお願い致します。

Comments

[yhasegawa55]

ちょっと気になったので勘違いならごめんなさい、CORSで問題は起きていませんか？

[HelpmeHelpme]

ご連絡遅くなり申し訳ございません。CORSでの問題でした。ありがとうございます！

[yhasegawa55]

ですよね
特定できるなら、Allow-Origin: *は避けたほうが良いと思います

Answer 1

【原因】
RESTAPI(json)をAjaxで取得しようとしたときにCORSでブロックされていました。

【対応方法】
WP側にheader情報を追加するように変更しました。
◆変更対象：functions.php
◆対象コードサンプル:
add_action( 'rest_api_init', function() {
remove_filter( 'rest_pre_serve_request', 'rest_send_cors_headers' );
add_filter( 'rest_pre_serve_request', function( $value ) {
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With");
return $value;
});
}, 15 );