关于跨域请求的一些问题

The Problem

Usually web browsers forbids cross-domain requests, due the same origin security policy. That's why using web-fonts from remote domain may cause an error in your browser.

<style type="text/css">
@font-face {
font-family: 'OpenSans';
src: url('https://test.zinoui.com/cross-domain-fonts/disabled/OpenSans.woff2') format('woff2');
}
html, body{
font: normal 16px OpenSans, sans-serif;
}
</style>

If you ever see this error in your browser, you should know that cross-origin policy is applied.

The Solution

To overcome cross-origin restrictions, the response from remote server must include the
Access-Control-Allow-Origin header.

If you're using font services as
Typekit and
Google Fonts, or content delivery networks as
BootstrapCDN,
CdnJS and
JsDelivr to load your prefered fonts you don't need to do anything, because the Access-Control-Allow-Origin header is already presented in their response.

Apache

To configure the Apache web server put the code below into the

httpd.conf

or

.htaccess

file.

How to correct mime type headers on Apache

AddType application/vnd.ms-fontobject    .eot
AddType application/x-font-opentype      .otf
AddType image/svg+xml                    .svg
AddType application/x-font-ttf           .ttf
AddType application/font-woff            .woff
AddType application/font-woff2           .woff2

How to enable cross-origin resource sharing (CORS) on Apache

<IfModule mod_headers.c>
<FilesMatch ".(eot|otf|svg|ttf|woff|woff2)$">
Header set Access-Control-Allow-Origin "*"
</FilesMatch>
</IfModule>

nginx

To configure the NGINX web server put the code below into the

/etc/nginx/nginx.conf

or your custom

/etc/nginx/conf.d/custom.conf

file.

How to correct mime type headers on nginx

application/vnd.ms-fontobject    eot;
application/x-font-opentype      otf;
image/svg+xml                    svg;
application/x-font-ttf           ttf;
application/font-woff            woff;
application/font-woff2           woff2;

How to enable cross-origin resource sharing (CORS) on nginx

location ~* .(eot|otf|svg|ttf|woff|woff2)$ {
add_header Access-Control-Allow-Origin *;
}

IIS

To configure the Microsoft IIS put the code below into the

web.config

system.webServer block.

How to enable cross-origin resource sharing (CORS) on IIS

<system.webServer>
<httpProtocol>
<customHeaders>
<add name="access-control-allow-origin" value="*" />
<add name="access-control-allow-headers" value="content-type" />
</customHeaders>
</httpProtocol>
</system.webServer>

PHP

Can't control the remote server? It's not a problem. Instead of using the font file directly into your styles (CSS) you can use a server script.

How to use a server script rather than a physical font file

<style type="text/css">
@font-face {
font-family: 'OpenSans';
src: url('path/to/fonts.php') format('woff2');
}
html, body{
font: normal 16px OpenSans, sans-serif;
}
</style>

How to fix cross-domain @font-face issues with PHP

<?php
// fonts.php
header("Access-Control-Allow-Origin: *");
header("Content-Type: application/font-woff2");
echo @file_get_contents("http://test.zinoui.com/cross-domain-fonts/disabled/OpenSans.woff2");
?>

Conclusion
After setting up your server configuration files properly, the above issue should disappear. Let's see how the cross-domain request and response should look like: