Вопрос или проблема
У меня есть сайт на WordPress, работающий на WordPress 5.9.3, который использует тему на основе React, использующую REST API (v1) для получения контента и меню из стандартной CMS WordPress.
Однако при попытке установить его локально я не могу заставить API работать и получать нужные данные.
Я использую среду Docker на основе этого репозитория: https://github.com/kassambara/wordpress-docker-compose
Поскольку тема использует React и REST API для получения содержимого сайта, при попытке просмотреть сайт он застревает на экране загрузки.
Это ошибки консоли:
GET http://localhost:3000/wp-json/{REDACTED_API_NAME}/v1/site net::ERR_CONNECTION_REFUSED GET http://localhost:3000/wp-json/{REDACTED_API_NAME}/v1/menus?location=main-menu net::ERR_CONNECTION_REFUSED GET http://localhost:3000/wp-json/{REDACTED_API_NAME}/v1/menus?location=footer-menu net::ERR_CONNECTION_REFUSED И вот трассировка стека для первой ошибки, для справки, если это поможет:
(anonymous) @ VM382:1 fetchSiteInformation @ bundle.ea81906….js:2499 fetchInitialContent @ bundle.ea81906….js:2535 (anonymous) @ bundle.ea81906….js:5653 (anonymous) @ bundle.ea81906….js:13750 (anonymous) @ bundle.ea81906….js:12811 componentWillMount @ bundle.ea81906….js:18846 Ng @ bundle.ea81906….js:12158 fi @ bundle.ea81906….js:12197 Rj @ bundle.ea81906….js:12284 Qj @ bundle.ea81906….js:12267 Kj @ bundle.ea81906….js:12267 yj @ bundle.ea81906….js:12260 Ig @ bundle.ea81906….js:12251 bk @ bundle.ea81906….js:12302 (anonymous) @ bundle.ea81906….js:12305 Nj @ bundle.ea81906….js:12261 ik @ bundle.ea81906….js:12305 exports.render @ bundle.ea81906….js:12311 (anonymous) @ bundle.ea81906….js:11350 __webpack_require__ @ bundle.ea81906….js:20 (anonymous) @ bundle.ea81906….js:63 (anonymous) @ bundle.ea81906….js:66 Сам webpack компилируется с предупреждениями.
Сервер webpack-dev-server работает на порту 8081, а phpmyadmin на порту 8080.
Я попытался переключить сервер webpack на использование порта 3000 (чтобы соответствовать тому, что запрашивает API), но это не помогло.
Я могу войти в админку WP, и с этой стороны проблем нет. Весь контент и плагины присутствуют.
Это не проблема в производственной или тестовой среде, и также не происходит у других на их собственных локальных машинах.
Я использую Mac Monterey с чипом Apple M1.
Только что столкнулся с этой же проблемой и проверил другие обсуждения, и это действительно сработало: в AdminPanal => Настройки -> Постоянные ссылки -> сменить с ‘по умолчанию’ на ‘Имя записи’, затем сохранить постоянные ссылки и перезагрузить URL вашего API, и теперь он должен работать.
Ответ или решение
Решение проблемы с работой REST API в локальной среде WordPress — это задача, которая требует учета множества потенциальных причин и настроек. Исходя из описания проблемы и использованных технологий, давайте рассмотрим возможные шаги к исправлению ситуации.
Теория
REST API в WordPress позволяет вам взаимодействовать с сайтом на более глубоком уровне, например, для получения или отправки данных с использованием внешних приложений, в данном случае React. Однако работа с API на локальной машине может осложняться рядом факторов, таких как неправильные настройки серверов, блокировка портов и несоответствие URL.
Пример
-
URL и порты: Ваша проблема связана с тем, что запросы к REST API получают ответ ERR_CONNECTION_REFUSED. Это может произойти, если приложение React запрашивает данные с ссылки
http://localhost:3000, но WordPress не обслуживается на этом порту. Попробуйте убедиться, что в Docker файле правильно указаны настройки портов. Также убедитесь, что URL запросов к API соответствует реальному URL WordPress сайта на локальной машине. -
Пермалинкс: Ваша проблема может также быть связана с неправильными настройками пермалинков в WordPress. Перейдите в админку WordPress, затем в "Настройки" -> "Постоянные ссылки", и установите их на ‘Название записи’. Это может помочь устранить проблему с REST API, поскольку настроенные пермалинки часто связаны с механизмами работы API.
-
Cross-Origin Resource Sharing (CORS): Внимательно проверьте настройки CORS. Если ваше приложение пытается сделать запросы с другого домена или порта, может потребоваться соответствующая настройка разрешений на сервере, чтобы разрешить такие запросы.
-
Файрволл и Proxy: Удостоверьтесь, что локальный файрволл или настройки сети вашего устройства не блокируют необходимые порты. Проверьте настройки вашего Docker окружения, особенно если вы используете прокси-серверы.
-
Специфичность Модуля для M1: На вашем Mac с чипом M1 могут быть специфичные нюансы настройки Docker-контейнеров. Убедитесь, что образ Docker и его зависимости поддерживают архитектуру ARM.
Применение
-
Проверьте, какие именно порты используются для WordPress и корректно ли на них направляются запросы API. При необходимости откройте доступ к нужным портам через настройки Docker и убедитесь, что React-приложение использует корректные URL.
-
Измените пермалинки и протестируйте API повторно. Это часто помогает устранить проблемы, связанные с URL API.
-
Если после всех изменений ошибка сохраняется, проверьте журнал ошибок Docker для получения более детальной информации.
-
Убедитесь в том, что у вас отсутствуют ограничения на уровне сети или локальной машины, которые препятствуют соединению с API.
Решение подобных проблем требует детального анализа всех промежуточных компонентов системы и их взаимодействия. Регулярные обновления и проверка рабочих сред помогут избежать подобных проблем в будущем.