Cách thêm tiêu đề Access-Control-Allow-Origin

Tôi đang thiết kế một trang web (ví dụ: mywebsite.com) và trang này tải các phông chữ font-face từ một trang khác (ví dụ như anothersite.com). Tôi đang gặp sự cố với việc tải phông chữ khuôn mặt phông chữ trong Firefox và tôi đã đọc trên blog này :

Firefox (hỗ trợ @ font-face từ phiên bản 3.5) không cho phép phông chữ tên miền chéo theo mặc định. Điều này có nghĩa là phông chữ phải được cung cấp từ cùng một miền (và miền phụ) trừ khi bạn có thể thêm tiêu đề “Access-Control-Allow-Origin” vào phông chữ.

Làm cách nào để đặt tiêu đề Access-Control-Allow-Origin thành phông chữ?

Vì vậy, những gì bạn làm là ... Trong thư mục tệp phông chữ, hãy đặt một tệp htaccess với nội dung sau.

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

cũng trong tệp CSS từ xa của bạn, khai báo font-face cần có URL tuyệt đối đầy đủ của tệp phông chữ (không cần thiết trong tệp CSS cục bộ):

ví dụ

@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')

}

Điều đó sẽ khắc phục sự cố. Một điều cần lưu ý là bạn có thể chỉ định chính xác miền nào nên được phép truy cập phông chữ của bạn. Trong htaccess ở trên, tôi đã chỉ định rằng mọi người đều có thể truy cập phông chữ của tôi, "*"tuy nhiên bạn có thể giới hạn nó ở:

Một URL duy nhất:

Bộ tiêu đề Access-Control-Allow-Origin http://example.com

Hoặc danh sách URL được phân tách bằng dấu phẩy

Access-Control-Allow-Origin: http://site1.com,http://site2.com

(Nhiều giá trị không được hỗ trợ trong các triển khai hiện tại)

Theo tài liệu chính thức , các trình duyệt không thích nó khi bạn sử dụng

Access-Control-Allow-Origin: "*"

tiêu đề nếu bạn cũng đang sử dụng

Access-Control-Allow-Credentials: "true"

đầu trang. Thay vào đó, họ muốn bạn cho phép xuất xứ của họ một cách cụ thể. Nếu bạn vẫn muốn cho phép tất cả các nguồn gốc, bạn có thể thực hiện một số phép thuật Apache đơn giản để nó hoạt động (đảm bảo bạn đã mod_headersbật):

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

Các trình duyệt được yêu cầu gửi Origintiêu đề trên tất cả các yêu cầu tên miền chéo. Tài liệu nói rõ rằng bạn cần lặp lại tiêu đề này trong Access-Control-Allow-Origintiêu đề nếu bạn đang chấp nhận / dự định chấp nhận yêu cầu. Đó là những gì Headerchỉ thị này đang làm.

Rất tiếc, câu trả lời được chấp nhận không phù hợp với tôi, vì tệp CSS trang web của tôi @ nhập các tệp CSS phông chữ và tất cả chúng đều được lưu trữ trên CDN của Tệp đám mây Rackspace.

Vì tiêu đề Apache không bao giờ được tạo (vì CSS của tôi không có trên Apache), tôi đã phải làm một số việc:

1. Đi tới giao diện người dùng tệp trên đám mây và thêm tiêu đề tùy chỉnh (Access-Control-Allow-Origin với giá trị *) cho mỗi tệp phông chữ tuyệt vời
2. Thay đổi Loại-Nội dung của tệp woff và ttf thành phông chữ / woff và phông chữ / ttf tương ứng

Xem liệu bạn có thể thoát khỏi chỉ với # 1 không, vì thứ hai yêu cầu một chút thao tác dòng lệnh.

Để thêm tiêu đề tùy chỉnh trong # 1:

• xem vùng chứa tệp trên đám mây cho tệp
• cuộn xuống tệp
• nhấp vào biểu tượng bánh răng
• nhấp vào Chỉnh sửa Tiêu đề
• chọn Access-Control-Allow-Origin
• thêm ký tự đơn '*' (không có dấu ngoặc kép)
• Nhấn Enter
• lặp lại cho các tệp khác

Nếu bạn cần tiếp tục và thực hiện # 2, thì bạn sẽ cần một dòng lệnh với 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

Từ kết quả trả về, trích xuất các giá trị cho X-Auth-Token và 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

Tất nhiên, quá trình này chỉ hoạt động nếu bạn đang sử dụng Rackspace CDN. Các CDN khác có thể cung cấp các phương tiện tương tự để chỉnh sửa tiêu đề đối tượng và thay đổi loại nội dung, vì vậy có thể bạn sẽ gặp may (và đăng thêm một số thông tin ở đây).

Đối với Ứng dụng dựa trên Java, hãy thêm phần này vào tệp web.xml của bạn:

<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>

Hãy kiểm tra liên kết này .. Nó chắc chắn sẽ giải quyết được vấn đề của bạn .. Có rất nhiều giải pháp để thực hiện lệnh gọi tên miền chéo GET Ajax NHƯNG YÊU CẦU ĐĂNG LÊN MIỀN CHÉO ĐƯỢC GIẢI QUYẾT TẠI ĐÂY . Tôi đã mất 3 ngày để tìm ra nó.

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

Trong file.php của bạn yêu cầu ajax, có thể đặt tiêu đề giá trị.

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