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

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

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

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

ОТВЕТЫ

Ответ 1

Итак, что вы делаете... В папке с файлами шрифтов поместите файл 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

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

Ответ 2

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

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.

Ответ 3

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

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

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

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

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

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

Если вам нужно продолжить и сделать # 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

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

Ответ 4

Для приложения на основе 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>

Ответ 5

Проверьте эту ссылку.. Это определенно решит вашу проблему.. Существует множество решений для перекрестного домена GET Ajax calls НО ЗАПРОС НА ПОРШНЕЕ ДОМЕН РЕШЕННО ЗДЕСЬ. Мне потребовалось 3 дня, чтобы понять это.

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

Ответ 6

В файле file.php запроса ajax можно задать заголовок значения.

<?php header('Access-Control-Allow-Origin: *'); //for all ?>