如何允許從其他域引用CSS文件？

Question

我建立了兩個網站。 其中一個是http://static.example.com/ ，它正在托管靜態文件。 另一個是http://www.example.com/托管一個Web應用程序。

在http://www.example.com/中 ，當我從靜態網站（例如http://static.example.com/logo.png）引用圖像時，圖像會正確顯示。 但是，當我把：

<link rel="stylesheet" type="text/css" href="http://static.example.com/demo.css" />

在頁面上， demo.css的樣式不適用於頁面。

在Chrome的開發者工具中：

• 在“ 網絡”選項卡中，我可以清楚地看到瀏覽器正在請求和接收的demo.css文件（HTTP 200或HTTP 304）。 如果在新選項卡中打開文件，則會正確顯示CSS代碼。

• 在“ 網絡”選項卡中，當我單擊該文件並打開“ 響應”子選項卡時，它會顯示： “此請求沒有可用的響應數據。”

• 在源選項卡中，有static.example.com節點，它包含demo.css ，但是當我點擊demo.css ，在右側面板依然空盪盪的，如果該文件是空的。

是否有一種CSS文件的跨源策略？

如果我用例如http://cdn.sstatic.net/Sites/stackoverflow/all.css（Stack Overflow使用的那個）替換樣式文件，則樣式將應用於頁面。

筆記：

• CSS文件demo.css只包含body{color:red;} 。 HTML頁面包含一個內部帶有<p>Hello, World!</p>的正文。 瀏覽器顯示黑色文本。 我希望它能顯示紅色文字。

• 我用example.com替換了實際的TLD，實際的結構和域名非常相似。

• 我可以用Chromium 49和Firefox 45重現這個問題。

Answer 1

似乎與content-type 。

對於不起作用的CSS文件：

Content-Type:text/plain

對於有效的CSS文件：

Content-Type:text/css

如MDN文檔中所述

以下是可能嵌入跨源的資源的一些示例：

• 帶有<link rel="stylesheet" href="..."> CSS。 由於CSS的寬松語法規則，跨源CSS需要正確的Content-Type標頭。 限制因瀏覽器而異： IE ， Firefox ， Chrome ， Safari （向下滾動到CVE-2010-0051）和Opera 。

查看Content-type標頭並確保它們是正確的。