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

Question

I set up two websites. One, http://static.example.com/ , is hosting static files. Another one, http://www.example.com/ hosts a web application.

When, within http://www.example.com/ , I reference images from the static site such as http://static.example.com/logo.png , the image is displayed correctly. However, when I put:

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

on the page, the style from demo.css is not applied to the page.

In Chrome's Developer Tools:

• In Network tab, I can clearly see the demo.css file being requested and received (HTTP 200 or HTTP 304) by the browser. If open the file in the new tab, the CSS code is displayed correctly.

• In Network tab, when I click on the file and open Response sub-tab, it shows: “This request has no response data available.”

• In Sources tab, there is static.example.com node and it contains demo.css , but when I click on demo.css , the panel at the right remains empty, as if the file was empty.

Is there a sort of cross-origin policy for CSS files?

If I replace the style file by, for instance, http://cdn.sstatic.net/Sites/stackoverflow/all.css , the one used by Stack Overflow, the style is applied to the page.

Notes:

• The CSS file demo.css contains just body{color:red;} . The HTML page contains a body with a <p>Hello, World!</p> inside. The browser shows black text. I would expect it to show red text instead.

• I replaced the actual TLD by example.com , the actual structure and domain names are very similar.

• I can reproduce the issue with Chromium 49 and Firefox 45.

Answer 1

Appears to be related to the content-type .

For the CSS file that doesn't work:

Content-Type:text/plain

For the CSS file that does work:

Content-Type:text/css

As noted in the 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 .

Look into the Content-type headers and ensure they're correct.