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

Question

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

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

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

Answer 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

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

Answer 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.

Answer 3

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

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

1. Перейти к пользовательскому интерфейсу облачных файлов и добавить собственный заголовок (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 могут предлагать аналогичные возможности для редактирования заголовков объектов и изменения типов контента, так что, возможно, вам повезет (и выложите здесь дополнительную информацию).

Answer 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>

Answer 5

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

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

Answer 6

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

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