Cross-domain problems with CSS loading fonts

Copyright NOTICE: This article is the original article of the blogger, without the permission of the blogger may not be reproduced.

Just ran into a CSS loading font cross-domain problem, record ah.

A site's dynamic request is a different domain name than a static file request. The domain name of the site is www.domain.com, while the static file's domain name is st.domain.com.

Problem:

Page loading CSS file: <link rel= "stylesheet" href= "Http://st.domain.com/css/uniform.css"/>

External fonts are called in this CSS:

@font-face {
  font-family: ' Fontawesome ';
  Src:url ('.. /font/fontawesome-webfont.eot ');

}

The browser has requested a cross-domain error.

Solution:

We use access-control-allow-origin:* to resolve cross-domain problems by enabling cors.

The specific steps are as follows:

1. Open the Apache mod_headers module

LoadModule Headers_module modules/mod_headers.so

2. Add in st.domain.com Host configuration

Header Set Access-control-allow-origin http://www.domain.com (this sentence can also be added to the URL rewrite file)

Restart Apache.