Как добавить заголовок Access-Control-Allow-Origin

Я разрабатываю веб-сайт (например, mywebsite.com), и этот сайт загружает шрифтовые шрифты с другого сайта (например, anothersite.com). У меня были проблемы с загрузкой шрифта шрифта в Firefox, и я читал в этом блоге:

Firefox (который поддерживает @font-face из версии 3.5) не разрешает междоменные шрифты по умолчанию. Это означает, что шрифт должен обслуживаться из того же домена (и субдомена), если только вы не можете добавить к шрифту заголовок "Access-Control-Allow-Origin".

Как я могу установить заголовок Access-Control-Allow-Origin для шрифта?

Источник

6 ответов

Решение

Итак, что вы делаете, это... В папке с файлами шрифтов поместите файл htaccess со следующим.

<FilesMatch "\.(ttf|otf|eot|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>
</FilesMatch>

также в вашем удаленном файле CSS для объявления font-face требуется полный абсолютный URL-адрес файла шрифта (не требуется в локальных файлах CSS):

например

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')

}

Это решит проблему. Стоит отметить, что вы можете точно указать, каким доменам должен быть разрешен доступ к вашему шрифту. В вышеупомянутом htaccess я указал, что каждый может получить доступ к моему шрифту с "*" Однако вы можете ограничить его до:

Один URL:

Набор заголовков Access-Control-Allow-Origin http://example.com/

Или список URL через запятую

Access-Control-Allow-Origin: http://site1.com,http://site2.com

(Несколько значений не поддерживаются в текущих реализациях)

Источник

Согласно официальным документам, браузерам не нравится, когда вы используете

Access-Control-Allow-Origin: "*"

заголовок, если вы также используете

Access-Control-Allow-Credentials: "true"

заголовок. Вместо этого они хотят, чтобы вы разрешили их происхождение. Если вы все еще хотите разрешить все источники, вы можете применить простую магию Apache, чтобы заставить ее работать (убедитесь, что у вас есть mod_headers включен):

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN

Браузеры должны отправить Origin заголовок по всем междоменным запросам. В документах конкретно указано, что вам нужно повторить этот заголовок обратно в Access-Control-Allow-Origin заголовок, если вы принимаете / планируете принять запрос. Вот что это Header Директива делает.

Источник

Принятый ответ не работает для меня, к сожалению, поскольку CSS-файлы моего сайта @import шрифтовые CSS-файлы, и все они хранятся в CDN Rackspace Cloud Files.

Так как заголовки Apache никогда не генерируются (так как мой CSS не на Apache), мне пришлось сделать несколько вещей:

  1. Перейдите в пользовательский интерфейс Cloud Files и добавьте настраиваемый заголовок (Access-Control-Allow-Origin со значением *) для каждого файла font-awesome.
  2. Измените Content-Type файлов woff и ttf на font/woff и font/ttf соответственно

Посмотрите, сможете ли вы обойтись только с #1, поскольку второе требует немного работы с командной строкой.

Чтобы добавить пользовательский заголовок в #1:

  • просмотреть контейнер облачных файлов для файла
  • прокрутите вниз к файлу
  • щелкните значок винтика
  • нажмите Редактировать заголовки
  • выберите Access-Control-Allow-Origin
  • добавить одиночный символ '*' (без кавычек)
  • нажмите ввод
  • повторить для других файлов

Если вам нужно продолжить и сделать #2, то вам понадобится командная строка с CURL

curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0

Из полученных результатов извлеките значения для X-Auth-Token и X-Storage-Url

curl -X POST \
  -H "Content-Type: font/woff" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woff

curl -X POST \
  -H "Content-Type: font/ttf" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf

Конечно, этот процесс работает, только если вы используете Rackspace CDN. Другие CDN могут предлагать аналогичные возможности для редактирования заголовков объектов и изменения типов контента, так что, возможно, вам повезет (и опубликуйте здесь дополнительную информацию).

Источник

Для Java-приложения добавьте его в файл web.xml:

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.ttf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.otf</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.eot</url-pattern>
</servlet-mapping>

<servlet-mapping>
    <servlet-name>default</servlet-name>
    <url-pattern>*.woff</url-pattern>
</servlet-mapping>
Источник

Проверьте эту ссылку. Это определенно решит вашу проблему. Существует множество решений для междоменных вызовов GET Ajax,НО ЗАПРОС ПОЧТЫ ДЛЯ CROSS DOMAIN РЕШЕН ЗДЕСЬ. Мне потребовалось 3 дня, чтобы понять это.

http://blogs.msdn.com/b/carlosfigueira/archive/2012/02/20/implementing-cors-support-in-asp-net-web-apis.aspx

Источник

В вашем file.php запроса ajax, можете установить значение header.

<?php header('Access-Control-Allow-Origin: *'); //for all ?>
Источник
Другие вопросы по тегам