如何允许从其他域引用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文件是否有一种跨域策略？

如果我替换样式文件，例如，使用Stack Overflow使用的样式http://cdn.sstatic.net/Sites/stackoverflow/all.css，样式将应用于页面。

注意：

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

所述

  

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

     

  
• 带<link rel="stylesheet" href="...">的CSS。由于放松   CSS的语法规则，跨源CSS需要正确的Content-Type   头。限制因浏览器而异：   IE，   Firefox，   Chrome，   Safari（向下滚动到   CVE-2010-0051）和Opera。
  

查看Content-type标题并确保它们正确无误。