Запрос POST пользовательской конечной точки API WordPress не работает в React

Question

У меня есть серверная часть WordPress, в которую я добавил свои собственные конечные точки в API:

// retrieve countries
register_rest_route( $namespace, '/countries',
    array(
        'methods'  => 'GET',
        'callback' => array( $this, 'get_countries' ),
    )
);

// check answer
register_rest_route( $namespace, '/check_answer',
    array(
        'methods'  => 'POST',
        'callback' => array( $this, 'check_answer' ),
    )
);

Я настроил свою среду следующим образом: https://example.com - это место, где Приложение React живет, а WordPress находится в подкаталоге на https://example.com/wp

. Мое приложение React выполняет запросы POST и GET к указанным выше конечным точкам. У меня есть переменная производственной среды, в которой я устанавливаю базовый URL-адрес API, который равен https://example.com/wp/wp-json/game ('game' - мое пространство имен), и поэтому я могу делать запросы с Ax ios на https://example.com/wp/wp-json/game/countries и https://example.com/wp/wp-json/game/check_answer и здесь возникает проблема.

Мой сервер настроен так, что он обслуживает приложение React как с www, так и без него. Итак, https://example.com и https://www.example.com обслуживают одно и то же приложение.

Но это создает интересную проблему для моих пользовательских конечных точек: запрос GET всегда работает. но запрос POST работает только в том случае, если я пробую его с https://example.com, а НЕ с https://www.example.com. В последнем случае он просто показывает мне неудавшийся запрос. Нет ответа, ничего.

Я погуглил, и похоже, что это связано с CORS, но мне не удалось это исправить. Есть идеи здесь?

Answer 1

Прежде всего, я хотел бы отметить, что ваши Get запросы работают, потому что они принадлежат к категории, которая не запускает предполетный запрос. В то время как ваш запрос Post, вероятно, использует какой-то заголовок, который удаляет его из категории, что требует прохождения предварительной проверки. Если вам интересно узнать больше, вот ссылка на документацию.

https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

Теперь, согласно вашему комментарию, вы получаете ошибку

Ответ на предполетный запрос не проходит проверку контроля доступа: на запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'.

Метод, которым вы пользуетесь использование для установки заголовков, как вы упомянули в комментарии, не работает с запросами на отдых. Вы можете использовать приведенную ниже функцию в своем functions.php или файле плагина, чтобы установить источник *.

function sr_rest_send_cors_headers( $value ) 
{   
    header( 'Access-Control-Allow-Origin: *' );
    header( 'Access-Control-Allow-Methods: OPTIONS, GET, POST, PUT, PATCH, DELETE' );
    header( 'Access-Control-Allow-Credentials: true' );
    header( 'Vary: Origin', false );

    return $value;
}
add_filter( 'rest_pre_serve_request', 'sr_rest_send_cors_headers', 11 );

Хотя я рекомендую то, что WordPress делает по умолчанию. Если вы отметите wp-includes/rest-api.php, вы найдете исходную функцию, которую я изменил для ваших целей. Если вам интересно взглянуть, вот ссылка tra c.

https://core.trac.wordpress.org/browser/tags/5.4/src/wp-includes/rest-api.php#L574