एक्सेस-कंट्रोल-अनुमति-मूल हेडर कैसे जोड़ें

99

मैं एक वेबसाइट (जैसे mywebsite.com) डिजाइन कर रहा हूं और यह साइट किसी अन्य साइट (anothersite.com) से फ़ॉन्ट-फेस फ़ॉन्ट लोड करती है। फ़ायरफ़ॉक्स में फॉन्ट फेस फॉन्ट लोडिंग में मुझे समस्या आ रही थी और मैंने इस ब्लॉग पर पढ़ा :

फ़ायरफ़ॉक्स (जो v3.5 से @ फॉन्ट-फेस को सपोर्ट करता है) डिफ़ॉल्ट रूप से क्रॉस-डोमेन फोंट की अनुमति नहीं देता है। इसका मतलब यह है कि फ़ॉन्ट को उसी डोमेन (और उप-डोमेन) से परोसा जाना चाहिए जब तक कि आप फ़ॉन्ट में "एक्सेस-कंट्रोल-अनुमति-उत्पत्ति" हेडर नहीं जोड़ सकते।

मैं एक्सेस-कंट्रोल-अनुमति-उत्पत्ति हेडर को फ़ॉन्ट पर कैसे सेट कर सकता हूं?

header cors font-face

— Mazatec
स्रोत

यह संबंधित पाया गया: stackoverflow.com/q/14003332/1423096

— alo Malbarez

164

तो आप क्या करते हैं ... फॉन्ट फाइल फोल्डर में htaccess फाइल को निम्न के साथ रखें।

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

आपकी दूरस्थ सीएसएस फ़ाइल में भी, फॉन्ट-फेस घोषणा को फॉन्ट-फाइल का पूर्ण निरपेक्ष 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~~

(वर्तमान कार्यान्वयन में एकाधिक मान समर्थित नहीं हैं)

— Mazatec
स्रोत

1

आपको पूर्ण पथ का उपयोग करने की आवश्यकता नहीं है। सरल url('/fonts/League_Gothic.woff') format('woff')पर्याप्त मान रहा है कि आप अपने .css फ़ाइल की तरह ही 'फोंट' फ़ोल्डर को डीआईआर में रखते हैं।

— StrayObject

1

यह समाधान क्रॉस डोमेन .ajax अनुरोधों के लिए भी मान्य है !! अच्छा!

— इसहाक

3

@StrayObject - दूरस्थ CSS फ़ाइल को पूर्ण पथों का उपयोग करने की आवश्यकता होगी। स्थानीय CSS फ़ाइल में नहीं है।

— मजातक

यह स्पष्ट रूप से एकाधिक URL, अल्पविराम-सीमांकित या अन्यथा श्वेतसूची में संभव नहीं है; देख बग 671,608

— TGR

1

यह उत्तर ( stackoverflow.com/a/4110601 ) से लगता है कि अल्पविराम से अलग की गई सूची काम नहीं करती है

— Asaf

21

आधिकारिक डॉक्स के अनुसार , जब आप इसका उपयोग करते हैं तो ब्राउज़र इसे पसंद नहीं करते हैं

Access-Control-Allow-Origin: "*"

हैडर यदि आप भी उपयोग कर रहे हैं

Access-Control-Allow-Credentials: "true"

हैडर। इसके बजाय, वे चाहते हैं कि आप अपने मूल को विशेष रूप से अनुमति दें। यदि आप अभी भी सभी उत्पत्ति की अनुमति देना चाहते हैं, तो आप इसे काम करने के लिए कुछ सरल अपाचे जादू कर सकते हैं (सुनिश्चित करें कि आपने mod_headersसक्षम किया है):

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

Originसभी क्रॉस-डोमेन अनुरोधों पर हेडर भेजने के लिए ब्राउज़रों की आवश्यकता होती है । डॉक्स विशेष रूप से बताता है कि आपको इस हेडर को वापस हेडर में इको करने की आवश्यकता है Access-Control-Allow-Originयदि आप अनुरोध स्वीकार करने पर स्वीकार / योजना बना रहे हैं। यही Headerनिर्देश यही कर रहा है।

— laughingbovine
स्रोत

2

ऐसा लगता है कि मेरे लिए भी काम करता है, हालांकि यह आपके कैश को साफ़ करने के लिए साइड इफेक्ट होने का साइड इफेक्ट लगता है अगर आप दो अलग-अलग साइटों पर जाते हैं जो साइट

— जैक जेम्स

1

@ जैक: हाँ, यह CDN सामग्री (आपकी ओर, फ़ॉन्ट फ़ाइलों को देखकर) के लिए एक बड़ा है। कैशिंग सेटिंग्स के आधार पर, आप फ़ाइल सामग्री और स्थानीय रूप से (अपने परिदृश्य में) या प्रॉक्सी पर एक गलत कॉर्स हेडर के साथ समाप्त हो सकते हैं! ( ?yourdomainउत्तरार्द्ध मामले में काम के साथ कैश- बस्टिंग, लेकिन एक सीडीएन का उपयोग करने के लाभों को अवमूल्यन करता है)

— ov

2

कुछ कारणों से, HTTP_ORIGIN मेरे लिए सेट नहीं है, मुझे इस लाइन को जोड़ना था SetEnvIfNoCase Origin (.+) HTTP_ORIGIN=$1।

— डेविड रिकिटेल्ली

5

स्वीकृत उत्तर मेरे लिए दुर्भाग्य से काम नहीं करता है, क्योंकि मेरी साइट सीएसएस फाइलों को फ़ॉन्ट सीएसएस फ़ाइलों को आयात करती है, और ये सभी एक रैकस्पेस क्लाउड फाइल सीडीएन पर संग्रहीत हैं।

चूंकि अपाचे हेडर कभी उत्पन्न नहीं होते हैं (चूंकि मेरा सीएसएस अपाचे पर नहीं है), मुझे कई काम करने थे:

क्लाउड फाइल यूआई में जाएं और प्रत्येक फ़ॉन्ट-भयानक फ़ाइल के लिए एक कस्टम हेडर (मूल्य के साथ एक्सेस-कंट्रोल-अनुमति-मूल) जोड़ें
क्रमशः woff और ttf फ़ाइलों की सामग्री-प्रकार को फ़ॉन्ट / woff और फ़ॉन्ट / 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 ऑब्जेक्ट हेडर को संपादित करने और सामग्री प्रकार बदलने के लिए समान सुविधाएं प्रदान कर सकते हैं, इसलिए हो सकता है कि आप भाग्यशाली हों (और यहां कुछ अतिरिक्त जानकारी पोस्ट करें)।

— फिल
स्रोत

3

जावा आधारित अनुप्रयोग के लिए इसे अपनी 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>

— नीयन सन
स्रोत

2

इस लिंक की जाँच करें .. यह निश्चित रूप से आपकी समस्या का समाधान करेगा .. क्रॉस डोमेन प्राप्त करने के लिए बहुत सारे समाधान हैं। BUT POST REQUEST FOR CROSS DOMAIN IS SOLVED HERE । मुझे यह पता लगाने में 3 दिन लगे।

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

— user2440156
स्रोत

1

आपके फ़ाइल में। Ajax of request, मान हेडर सेट कर सकता है।

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

— सैंटोस एल। विक्टर
स्रोत