Как исправить ошибки CORS в WordPress? –

Сайты WordPress будут работать отлично, если вы используете их простым способом. Он будет выдавать вам различные типы ошибок в тот момент, когда вы захотите добавить дополнительные функции и сторонние скрипты. В нашей предыдущей статье мы объяснили проблему с WP-Cron при использовании Cloudflare. Точно так же ошибка CORS — еще одна популярная ошибка WordPress, которую многие пользователи пытаются исправить. В этой статье мы рассмотрим, что такое CORS и как исправить ошибки CORS в WordPress.

Что такое КОРС?

CORS расшифровывается как Cross-Origin Resource Sharing. По умолчанию веб-браузер разрешает все запросы, исходящие с одного и того же сервера, с использованием политики безопасности одного источника. Вот точное определение политики того же происхождения из Википедии:

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

Википедия

Теперь вы можете легко понять цель перекрестного происхождения. Он позволяет успешно загружать скрипты и другие ресурсы с другого домена или сервера. Ниже красивое изображение из МДН объясняя концепцию запросов из одного и того же источника и запросов из разных источников.

Пример CORS и просмотра ошибок

Возьмем случай, когда вы открываете страницу который имеет встроенный JavaScript и вызывает его из /страница 2. CORS сообщит браузеру, разрешен ли запрос перекрестного происхождения с сайта 2 сайтом 1. В противном случае браузер заблокирует этот запрос и отобразит ошибки, связанные с CORS, в консоли.

Лучший пример CORS — использование рекламных скриптов со сторонних доменов на вашем сайте. Такие браузеры, как Chrome, Firefox, Safari и Edge, будут блокировать рекламные сценарии, если вы не разрешаете CORS на своем сервере. Когда вы видите, что реклама или любой другой вывод не загружается на странице, щелкните правой кнопкой мыши страницу и выберите опцию «Проверить». Это откроет консоль разработчика браузера и перейдет в раздел «Консоль».

Вы увидите различные типы ошибок с кодами состояния 403, 401 или ошибки без кода состояния. Например, ниже показаны ошибки консоли, отображаемые в Google Chrome, и в ошибке четко указано: «Доступ к XMLHttpRequest в ‘……’ из источника ‘…..’ заблокирован политикой CORS». Вы также можете увидеть причину рядом с ошибкой, указывающей, что «заголовок« Access-Control-Allow-Origin »имеет значение« … .. », которое не равно предоставленному источнику».

Ошибка CORS в Google Chrome

Та же страница при открытии в браузере Mac Safari будет отображать разные ошибки, как показано ниже. Он показывает ошибку как «Происхождение ‘….’ не разрешено Access-Control-Allow-Origin. Код состояния: 401». Вы также можете увидеть такие ошибки, как «XMLHttpRequest не может загрузить «…..» из-за проверок управления доступом».

Ошибка CORS в браузере Safari

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

Исправить ошибки CORS в WordPress

Теперь, когда вы понимаете, что такое CORS и как найти связанные ошибки в консоли браузера. Следующий шаг — исправить ошибку, чтобы ваша страница загружалась в браузерах без ошибок. Проще говоря, вы должны добавить следующий код в свой файл .htaccess, чтобы разрешить совместное использование ресурсов из разных источников на вашем сервере.

Доступ-Контроль-Разрешить-Происхождение: *

Есть три разных способа добиться этого в зависимости от сценария.

1. Разрешение всех сайтов

Это наиболее распространенный способ разрешения CORS. Если вы хотите разрешить любые сторонние серверные запросы на своем сайте, добавьте следующий код в файл htaccess. * используется в качестве подстановочного знака для разрешения любых сторонних доменов.

Набор заголовков Access-Control-Allow-Origin: *

2. Разрешить определенный домен

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

Набор заголовков Access-Control-Allow-Origin:

К сожалению, это непросто сделать, так как вам нужно кодирование на стороне сервера для проверки домена, разрешенного в управлении доступом к заголовку. Поэтому вариант № 1 используется многими пользователями WordPress, поскольку он не требует дополнительного кодирования.

3. Разрешить определенные файлы со всех серверов

Последний вариант — ограничить тип файла, который вы хотите разрешить со сторонних серверов. Для этого вы можете использовать следующий код, указывающий разрешенные типы файлов в вашем файле htaccess.

Набор заголовков Access-Control-Allow-Origin: *

Этот код позволит изображениям PNG, файлам CSS и JS с любых серверов. Вы можете добавить шрифты и другие типы файлов изображений, чтобы разрешить их использование в CORS.

Другие соображения

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

• Некоторым хостинговым компаниям нужно, чтобы вы отключили кэширование для работы CORS. Например, если вы находитесь на SiteGround, вам необходимо отключить прямую доставку NGINX в разделе «Инструменты сайта > Скорость > Кэш».
• При использовании Cloudflare или любого другого CDN с настройкой кэширования вам может потребоваться полностью очистить кеш, чтобы изменения отражались с исходного сервера.
• CORS также может создавать проблемы при использовании протоколов HTTP и HTTPS. Обычно это отображается как ошибка смешанного содержимого в консоли браузера, и вам необходимо принудительно использовать HTTPS на вашем сайте, чтобы заблокировать другие протоколы.
• Еще одним соображением является обслуживание статических и других ресурсов из поддомена в основной домен. Это будет работать отлично, поскольку и поддомен, и основной домен обычно находятся на одном и том же исходном сервере. Однако это также может создать проблемы в зависимости от настроек вашего сервера. Вы можете решить эту проблему, специально указав поддомен, как описано выше в варианте № 2.