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

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

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

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

Итак, что вы делаете ... В папке файлов шрифтов поместите файл 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
• добавить одиночный символ '*' (без кавычек)
• нажмите 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

Конечно, этот процесс работает только в том случае, если вы используете 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, НО ЗАПРОС POST ДЛЯ 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 можно установить заголовок значения.

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