一直以為css中鏈接的資源，不會(huì)因?yàn)榭缬蚨鴮?dǎo)致加載失敗。比方說圖片。

但今天還是遇到了跨域失敗的問題。

chrome瀏覽器中提示：Access to Font at 'http://static.utsing.com/ienglish/font.ttf' from origin 'http://ienglish.utsing.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://ienglish.utsing.com' is therefore not allowed access.

edge瀏覽器中提示：CSS3115: @font-face 跨源請求失敗。無 Access-Control-Allow-Origin 標(biāo)頭。

這其實(shí)就是跨域?qū)е录虞d失敗。這可能是對于ttf這樣的資源存在一些潛在的危險(xiǎn)，不像圖片那樣安全，所以瀏覽器默認(rèn)禁止其跨域加載。

http://ienglish.utsing.com為主站，http://static.utsing.com為靜態(tài)資源站。

解決方法：

1.跨域?qū)е碌膯栴}，那就不要跨域了。將資源（http://static.utsing.com/ienglish/font.ttf)放到主站下，并修改對應(yīng)鏈接。（估計(jì)這個(gè)方法，你的上司不滿意）

2.將靜態(tài)資源站設(shè)置為可以跨域。只要為此資源加入Access-Control-Allow-Origin這個(gè)header即可。

如果是nginx服務(wù)器的話，你可以在http塊內(nèi)加上如下代碼：

? ? ?add_header Access-Control-Allow-Origin http://ienglish.utsing.com;? //必須

? ? ?add_header Access-Control-Allow-Headers X-Requested-With;//可選

? ? ?add_header Access-Control-Allow-Methods GET,POST,OPTIONS;//可選

你也可以在php、java等代碼中加入Access-Control-Allow-Origin、Access-Control-Allow-Headers?、Access-Control-Allow-Methods這些header。