วิธีเพิ่มส่วนหัว 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 ระยะไกลของคุณการประกาศแบบอักษรต้องใช้ 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 แบบอักษรและสิ่งเหล่านี้ทั้งหมดถูกเก็บไว้ใน Rackspace Cloud Files CDN

เนื่องจากไม่เคยสร้างส่วนหัว Apache (เนื่องจาก CSS ของฉันไม่ได้อยู่ใน Apache) ฉันจึงต้องทำหลายอย่าง:

1. ไปที่ Cloud Files UI และเพิ่มส่วนหัวที่กำหนดเอง (Access-Control-Allow-Origin พร้อมค่า *) สำหรับไฟล์แบบอักษรแต่ละไฟล์ที่ยอดเยี่ยม
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>

ตรวจสอบการเชื่อมโยงนี้ .. แน่นอนมันจะแก้ปัญหาของคุณ .. มีมากมายของการแก้ปัญหาที่จะทำให้ข้ามโดเมนได้รับสายอาแจ็กซ์มี แต่โพสต์ขอข้ามโดเมนคือแก้ไขที่นี่ ฉันใช้เวลา 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 ?>