Как я могу исправить проблему веб-сайта "Отсутствующий перекрестный источник ресурсов (CORS)"?
По какой-то причине шрифты прекратили рендеринг на моих сайтах. Шрифты хранятся локально на том же сервере, что и сайт.
Я искал проблему и, похоже, был Missing Cross-Origin Resource Sharing (CORS) Response Header
, но я не могу понять решение для этого.
Все различные сайты говорят, что нужно использовать: Access-Control-Allow-Origin:*
Но поскольку я в первую очередь перед собой, я не знаю, куда его поместить. С этим может помочь мой хозяин?
Что я могу сделать, чтобы исправить эту проблему?
EDIT:
данный сайт: http://cyclistinsuranceaustralia.com.au/
Номер телефона, например, в правом верхнем углу должен быть шрифтом Bebas, но по умолчанию это Impact.
В консоли я получаю ошибки:
Шрифт из источника 'http://www.cyclistinsuranceaustralia.com.au' заблокирован от загрузки по политике совместного использования ресурсов Cross-Origin: заголовок "Access-Control-Allow-Origin" имеет значение http://www.cyclistinsuranceaustralia.com.au ', не равное исходному происхождению. Origin 'http://cyclistinsuranceaustralia.com.au', следовательно, не допускается.
Я обращаюсь к своему хозяину, который сказал:
Access-Control-Allow-Origin "http://www.cyclistinsuranceaustralia.com.au"
в моем файле .htaccess, но это не изменилось.
Ответы
Ответ 1
В вашем HTML вы установили "базовый" тег:
<base href="http://www.cyclistinsuranceaustralia.com.au/">
Ответ 2
Если вас просто интересует использование Access-Control-Allow-Origin:*
Вы можете сделать это с помощью этого файла .htaccess
в корне сайта.
Header set Access-Control-Allow-Origin "*"
Некоторая полезная информация здесь:
http://enable-cors.org/server_apache.html
Ответ 3
Я собираюсь предположить, что ваш хост использует C-Panel - и что он, вероятно, HostGator или GoDaddy. В обоих случаях они используют C-Panel (фактически, много хостов), чтобы сделать администрирование сервера максимально простым для вас, конечного пользователя. Даже если вы проводите через кого-то другого - посмотрите, можете ли вы войти в какую-то панель администратора и найти файл .htaccess, который вы можете редактировать. (Примечание: период до этого просто означает, что это "скрытый" файл/каталог).
Как только вы найдете файл htaccess, добавьте следующую строку:
-
Header set Access-Control-Allow-Origin "*"
Просто посмотрим, работает ли он.
Предупреждение: не используйте эту строку на производственном сервере
Он должен работать. Если нет, позвоните своему хозяину и спросите их, почему линия не работает - они, вероятно, смогут быстро помочь вам.
- После выполнения вышеуказанного рабочего изменения
*
на адрес запрашивающего домена http://cyclistinsuranceaustralia.com.au/
. Вы можете найти проблему с канонической адресацией (включая www), и если вам может понадобиться настроить хост для перенаправления. Это другой и меньший мост, чтобы пересечься. Вы, по крайней мере, будете в нужном месте.
Ответ 4
В вашем конкретном случае проблема связана с доступом к сайту из неканонического URL (www.site.com vs. site.com).
Вместо исправления проблемы CORS (для которой может потребоваться запись прокси-сервера на серверные шрифты с соответствующими заголовками CORS в зависимости от поставщика услуг), вы можете нормализовать свои URL-адреса для всегда содержимого сервера на каноническом URL-адресе и просто перенаправлять, если запрашивать страницу без "www"..
В качестве альтернативы вы можете загружать шрифты на разные серверы /CDN, которые, как известно, имеют настроенные заголовки CORS, или вы можете легко сделать это.
Ответ 5
у нас была аналогичная проблема с заголовком, когда Amazon (AWS) S3 назначил сообщение "Пост" в некоторых браузерах.
Точка должна была указать ведро CORS, чтобы открыть заголовок <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
подробнее в этом ответе: fooobar.com/questions/23705/...
Ответ 6
У нас была эта точная проблема с fontawesome-webfont.woff2, в результате чего была ошибка 406 на общем хосте (Cpanel). Я работал над неуловимым "доменом без файлов cookie" для проекта Wordpress Multisite, и мои страницы "www.domain.tld" имели бы следующую ошибку (3 раза) в Chrome:
Шрифт из источника 'http://static.fictionorpity.com' был заблокирован от загрузки политикой совместного использования ресурсов Cross-Origin: Нет "Access-Control- На запрашиваемом ресурсе присутствует заголовок Allow-Origin. Происхождение http://www.domain.tld ', следовательно, не допускается.
и в Firefox немного подробнее:
загружаемый шрифт: загрузка не удалась (font-family: "FontAwesome" style: normal weight: normal stretch: normal src index: 1): неправильный URI или межсайтовый доступ недопустимый источник: http://static.domain.tld/wp-content/themes/some-theme-here/fonts/fontawesome-webfont.woff2?v=4.7.0
шрифт-awesome.min.css: 4: 14 Запрос на перекрестный запрос заблокирован: политика одинакового происхождения запрещает чтение удаленного ресурса на http://static.domain.tld/wp-content/themes/some-theme-here/fonts/fontawesome-webfont.woff?v=4.7.0. (Причина: заголовок CORS 'Access-Control-Allow-Origin отсутствует.)
Я получил QWANT-вокруг (QWANT.com = фантастический) и нашел это сообщение SO:
Поддомены, порты и протоколы подстановочного подкаталога Access-Control-Allow-Origin
Час в чате с различным персоналом поддержки общего хоста (никто даже не знал о F12 в браузере...), а затем ожидал ответа на билет, который был разрезан без радости во время игры с mod_security. Я попытался скопировать код файла .htaccess вместе с сообщением в то же время и получил это, чтобы исправить ошибки 406, безупречно:
<IfModule mod_headers.c>
<IfModule mod_rewrite.c>
SetEnvIf Origin "http(s)?://(.+\.)?domain\.tld(:\d{1,5})?$" CORS=$0
Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
Header merge Vary "Origin"
</IfModule>
</IfModule>
Я добавил это к началу моего .htaccess в корне сайта, и теперь у меня есть новый дядя по имени Боб. (***, конечно, измените части domain.tld на то, что ваш домен, с которым вы работаете,...)
Моя ФАВОРИТНАЯ часть этого сообщения, хотя это возможность RegEx OR (|) нескольких сайтов в этом CORS "взломать", выполнив:
Чтобы разрешить несколько сайтов:
SetEnvIf Origin "http(s)?://(.+\.)?(othersite\.com|mywebsite\.com)(:\d{1,5})?$" CORS=$0
Это исправление, честно говоря, взорвало мой разум, потому что я столкнулся с этим вопросом раньше, работая с Dev в Fortune 500 компаниях, которые являются MILES выше моей базы знаний Apache, и не мог решить такие проблемы, не заставляя IT настраивать Настройки Apache.
Это своего рода волшебная пуля, чтобы исправить все эти проблемы CDN с доменами cookie-less (или около файлов cookie-less, если вы используете CloudFlare...), чтобы уменьшить количество ненужного веб-трафика из файлов cookie, которые отправляются с каждым запрос изображения только для того, чтобы быть отброшенным как плохая слепая дата сервером.
Super Secure, Super Elegant. Полюбите его: вам не нужно открывать пропускную способность ваших серверов для типов ресурсов воров/горячих ссылок.
Подкрепляет коллективные усилия этих трех блестящих умов для решения того, что когда-то считалось неразрешимым с .htaccess, с которым я собрал этот код вместе с:
@Noyo
https://stackoverflow.com/users/357774/noyo
@DaveRandom
https://stackoverflow.com/users/889949/daverandom
@Пратап-koritala
https://stackoverflow.com/users/4401569/pratap-koritala