Как я могу исправить проблему веб-сайта "Отсутствующий перекрестный источник ресурсов (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/">

Удалите эту строку из своего HTML, если она вам не нужна. Это должно заставить шрифты работать при просмотре http://cyclistinsuranceaustralia.com.au.
Вам, вероятно, придется перенаправить http://www.cyclistinsuranceaustralia.com.au в http://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