如何允许从其他域引用 CSS 个文件？

Question

我建立了两个网站。第一，http://static.example.com/, is hosting static files. Another one, http://www.example.com/ 托管 Web 应用程序。

当 http://www.example.com/, I reference images from the static site such as http://static.example.com/logo.png 内图像正确显示时。但是，当我输入：

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

在该页面上，demo.css 中的样式未应用于该页面。

在 Chrome 的开发者工具中：

• 在网络选项卡中，我可以清楚地看到浏览器正在请求和接收（HTTP 200 或 HTTP 304）demo.css 文件。如果在新选项卡中打开文件，CSS代码会正确显示。

• 在 Network 选项卡中，当我单击文件并打开 Response 子选项卡时，它显示： “此请求没有可用的响应数据。”

• 在 Sources 选项卡中，有 static.example.com 节点，它包含 demo.css，但是当我点击 demo.css, 右侧的面板仍然是空的，就好像文件是空的一样。

CSS 文件是否有某种跨源策略？

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

备注：

• CSS 文件 demo.css 仅包含 body{color:red;}。 HTML 页面包含一个内部带有 <p>Hello, World!</p> 的正文。浏览器显示黑色文本。我希望它显示红色文本。

• 我把实际的TLD换成了example.com，实际的结构和域名很像。

• 我可以用 Chromium 49 和 Firefox 45 重现这个问题。

Answer 1

似乎与 content-type 有关。

对于不起作用的 CSS 文件：

Content-Type:text/plain

对于有效的 CSS 文件：

Content-Type:text/css

如 MDN docs

中所述

Here are some examples of resources which may be embedded cross-origin:

• CSS with <link rel="stylesheet" href="...">. Due to the relaxed syntax rules of CSS, cross-origin CSS requires a correct Content-Type header. Restrictions vary by browser: IE, Firefox, Chrome, Safari (scroll down to CVE-2010-0051) and Opera.

查看 Content-type headers 并确保它们是正确的。