Font from origin has been blocked (CORS)

之前公司換了新主機,資料搬運完畢也沒出什麼問題,直到客服問某貓「那個選項前面本來就長這樣嗎?」為止。

一般的選項前面要麼是代表多選的圈圈,要麼是代表單選的正方形。就算某貓用字型代替那個系統預設的形狀,某貓也遵守這個「多選圈圈,單選方框」的規定。

結果現在全部變成豆腐框(顯示錯誤時出現的形狀,跟圖片不見時的包子一樣意思)了!

說真的,當下第一直覺是「我的字型檔呢!?」挖來挖去才發現字型檔還在啊,那怎麼會載入失敗?

看了看程式,恩很久沒動了,看來也沒問題。

終於想到啥的某貓這才打開Chrome的console來看(有空再介紹,Chrome的console真是好用的debug工具),這才看到好紅的一串字:

「Font from origin ‘site-link’ has been blocked from loading by Cross-Origin Resource Sharing policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘site-link’ is therefore not allowed access.」

⋯⋯怎麼又是這個(跪

簡單講一下,這串字的意思就是「您的字型檔因為跨網域載入禁止所以被擋了」,所以即使字型檔存在,它也載不進來。

「Cross-Origin Resource Sharing」就是「跨源資源共享」,它能讓網頁要求不同來源(domain,簡單理解就是不同網站)的資源(像是本文提到的字型檔)

CORS 需要瀏覽器和伺服器兩端的支援,目前主流瀏覽器都支援,IE則是需要 IE10 以上才行(不意外)。

伺服器部分,則是需要做一些設定。

就某貓這次遇到的問題,需要選擇修改httpd.conf檔,或者是修改網站自身的.htaccess檔案,某貓選擇修改 .htaccess檔案(.htaccess檔案有點像單個網站專屬的httpd.conf檔)。

​打開.htaccess檔案,貼上以下幾行:

  1. <IfModule mod_headers.c>
  2.   <FilesMatch “\.(eot|font.css|otf|ttc|ttf|woff)$”>
  3.     # 表示只要是css檔或字型檔都支援跨網域載入
  4.     Header set Access-Control-Allow-Origin “*”
  5.   </FilesMatch>
  6. </IfModule>

​修改.htaccess檔案最好的就是無需重開伺服器,設定就會生效。

​儲存上傳正式伺服器後,剛剛字型檔的錯誤就解決了。

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.