Nginx implements the detailed configuration of cross domain font files

This paper mainly introduces the relevant content of Nginx cross-domain font file, which is Shared for your reference and learning. Here is a detailed introduction:

Problem description

Today, when using the subdomain to access CSS of the root domain, it was found that the font could not be displayed. After ensuring that the path loading of CSS and Font fonts was no problem, it was basically determined that it was because of cross-domain problems.

Through the Nginx module Http_Headers_Module To add Access-Control-Allow-Origin Allowed address

console reported an error

ccess to Font at 'http://w001.static.akhack.com/css/KohinoorBangla-Regular.ttf' from origin 'http://carey.akhack.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://carey.akhack.com' is therefore not allowed access.

The solution

location ~* \.(eot|ttf|woff|svg|otf)$ {
  add_header Access-Control-Allow-Origin http://carey.akhack.com;
  add_header Access-Control-Allow-Headers X-Requested-With;
  add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
}

Pay attention to

add_header Access-Control-Allow-Origin http://carey.akhack.com;
// Only single domain or   ' *'  . Is not recommended   ' *'  Can cause security problems 

conclusion