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.
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:
Look into the Content-type
headers and ensure they're correct.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.