Як додати заголовок Access-Control-Allow-Origin

Я розробляю веб-сайт (наприклад, mywebsite.com), і цей сайт завантажує шрифти з іншим сайтом (наприклад, elsesite.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 для декларації шрифту потрібна повна абсолютна 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 мого сайту @ імпортують файли CSS шрифту, і всі вони зберігаються на CDN файлів хмарних файлів Rackspace.

Оскільки заголовки Apache ніколи не генеруються (оскільки мій CSS не знаходиться на Apache), мені довелося зробити кілька речей:

1. Перейдіть до інтерфейсу хмарних файлів та додайте користувальницький заголовок (Access-Control-Allow-Origin зі значенням *) для кожного файлу, що відрізняється шрифтом
2. Змініть Тип вмісту файлів woff та ttf на шрифт / 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

Звичайно, цей процес працює лише в тому випадку, якщо ви використовуєте CDN Rackspace. Інші 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>

Перевірте це посилання .. Це, безумовно, вирішить вашу проблему .. Є безліч рішень, щоб зробити міждоменний ПОЛУЧАЙТЕ дзвінки Ajax, АЛЕ ПОШТОВИЙ ЗАПИТ ДЛЯ КРИТОГО ДОМАШНЯ РЕШЕНИЙ ТУТ . На це мені знадобилося 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 ?>