如何允许从其他域引用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标头并确保它们是正确的。