एक्सेस-कंट्रोल-अनुमति-उत्पत्ति शीर्षलेख

Question

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

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

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

Answer 1

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

उदहारण के लिए:

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

भी अपने रिमोट सीएसएस फ़ाइल में, फॉन्ट-फेस घोषणा फ़ॉन्ट फ़ाइल (स्थानीय सीएसएस फ़ाइलों में की जरूरत नहीं) से भरा निरपेक्ष URL की जरूरत है

@font-face { 
    font-family: 'LeagueGothicRegular'; 
    src: url('http://www.mysite.com/css/fonts/League_Gothic.eot?') format('eot'), 
     url('http://www.mysite.com/css/fonts/League_Gothic.woff') format('woff'), 
     url('http://www.mysite.com/css/fonts/League_Gothic.ttf') format('truetype'), 
     url('http://www.mysite.com/css/fonts/League_Gothic.svg') 

} 

इससे समस्या ठीक हो जाएगी। ध्यान देने योग्य एक बात यह है कि आप निर्दिष्ट कर सकते हैं कि आपके फ़ॉन्ट तक पहुंचने के लिए किन डोमेन को अनुमति दी जानी चाहिए। ऊपर htaccess में मैं निर्दिष्ट किया है कि हर किसी को भले ही आप भुगतान सीमित कर सकते हैं "*" साथ मेरे फ़ॉन्ट उपयोग कर सकते हैं:

एक एकल यूआरएल:

Access-Control-Allow-Origin: http://yoursite.com 

या यूआरएल की एक अल्पविराम से सीमित सूची

Access-Control-Allow-Origin: http://yoursite.com,http://anothersite.com

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

Answer 2

the official docs के अनुसार, ब्राउज़रों यह पसंद नहीं है जब आप

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 निर्देश है।

Answer 3

इस लिंक को चेक करें .. यह निश्चित रूप से आपकी समस्या का समाधान करेगा .. क्रॉस डोमेन बनाने के लिए बहुत सारे समाधान हैं अजाक्स कॉल लेकिन क्रॉस डोमेन के लिए पोस्ट अनुरोध यहां हल किया गया है। इसे समझने में मुझे 3 दिन लगे।

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

Answer 4

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

स्वीकार किए जाते हैं जवाब, दुर्भाग्य से मेरे लिए काम नहीं करता है के बाद से अपनी साइट सीएसएस फ़ाइलें फ़ॉन्ट CSS @import फ़ाइलें, और ये सभी एक रैकस्पेस क्लाउड फ़ाइलें सीडीएन पर संग्रहीत हैं।

1. बादल फ़ाइलें यूआई पर जाएं और प्रवेश-Control-एक कस्टम हेडर (जोड़ें:

   अपाचे हेडर के बाद से उत्पन्न कभी नहीं किया है (के बाद से मेरी सीएसएस अपाचे पर नहीं है), मैं कई बातें करना पड़ा प्रत्येक फ़ॉन्ट-भयानक फ़ाइल

2. बदलें फ़ॉन्ट के WOFF और ttf फ़ाइलों की सामग्री प्रकार/WOFF और फ़ॉन्ट/ttf क्रमशः

अगर आप सिर्फ साथ भाग प्राप्त कर सकते हैं देखें के लिए अनुमति दें-उत्पत्ति * मूल्य के साथ) # 1, क्योंकि दूसरे को कमांड लाइन काम की थोड़ी आवश्यकता होती है।

# 1 में कस्टम हेडर जोड़ने के लिए:

• फ़ाइल
• पुस्तक फ़ाइल
• करने के लिए नीचे के लिए बादल फ़ाइलों कंटेनर को देखने कॉग आइकन पर क्लिक करें
• क्लिक हेडर संपादित
• एक्सेस-कंट्रोल-अनुमति-उत्पत्ति
• एकल वर्ण '*' जोड़ें (उद्धरण के बिना)
• हिट अन्य फ़ाइलों

आप जारी रखने के लिए # 2 कर की जरूरत है और है, तो आप कर्ल

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 

परिणामों से लौटे साथ एक कमांड लाइन की आवश्यकता होगी के लिए

दोहराने दर्ज करते हैं, एक्स-प्रमाणीकरण-टोकन और एक्स-भंडारण-यूआरएल

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

Answer 6

अनुरोध की आपकी file.php AJAX में, मान हेडर सेट कर सकते हैं।

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