Отсутствует заголовок ‘Access-Control-Allow-Origin’ при вызове REST API.

Вопрос или проблема

add_filter( 'allowed_http_origin', '__return_true' );

Ответ или решение

Если вы столкнулись с ошибкой отсутствия заголовка ‘Access-Control-Allow-Origin’ при попытке вызова API в вашей среде разработки WordPress и ReactJS, то это, скорее всего, связано с проблемами CORS (Cross-Origin Resource Sharing). В данном случае, ваша установка WordPress работает на localhost с портом 8888, а ваше React-приложение запускается на порте 3000. Эта разница в происхождении и вызывает проблему CORS, поскольку браузеры блокируют запросы между разными доменами, портами или протоколами по умолчанию для защиты данных.

Что такое CORS и почему это важно?

CORS — это механизм, который использует заголовки HTTP, чтобы обнаруживать разрешенные домены, с которых может быть осуществлён доступ к ресурсам на сервере. Если запрос отправляется с домена, который не содержится в этом списке, запрос будет заблокирован браузером.

Как решить проблему CORS в вашей ситуации?

1. Настройка WordPress для поддержки CORS:
   • Убедитесь, что в WordPress ваш API поддерживает необходимые заголовки. Включите фильтр в вашем файле functions.php, чтобы разрешить CORS-запросы.

add_filter('allowed_http_origin', '__return_true');
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-Methods: GET, POST, OPTIONS');
        header('Access-Control-Allow-Headers: Authorization, Content-Type, X-WP-Nonce');
        return $value;
    });
}, 15);

2. Проверка заголовков сервера:
   • Убедитесь, что ваш сервер Apache или Nginx настроен правильно. Для Apache, это может быть сделано с использованием файла .htaccess:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
</IfModule>

Для Nginx, добавьте следующий код в конфиг вашего сайта:

add_header 'Access-Control-Allow-Origin' '*';

3. Настройка безопасности:
   • Если ваше приложение будет работать в продакшене, не используйте универсальное разрешение (*), так как это может создать уязвимости. Лучше специфицировать конкретные домены, которым доверяете:

Header set Access-Control-Allow-Origin "http://localhost:3000"

Заключение

Настройка CORS в вашей среде разработки является необходимым шагом для обеспечения безопасного и эффективного взаимодействия между вашим frontend (ReactJS) и backend (WordPress) частями приложения. Следуя вышеуказанным шагам и убедившись в корректности конфигураций, вы сможете устранить ошибку и продолжить разработку своего приложения без преград.