利用 Access-Control-Allow-Origin 响应头解决跨域请求

Question

为了获得最大的性能，大家都知道，我们可以把我们的静态文件放到另一个 CDN 上。 随着这些静态文件是自定义的 Web 字体。 不幸的是通过 CDN（或任何跨域字体请求）自定义的 Web 字体都不能在 Firefox 或 Internet Explorer 正常的工作，虽然它们在基于 Webkit 的浏览器上工作。 他们居然需要自定义 CORS 系统配置，以正确显示。 这里有你需要做到这一点的代码。

设置 .htaccess 或 httpd.conf

该代码可以放在与 .htaccess 文件或 httpd.conf 的文件：

# Apache config
<FilesMatch ".(eot|ttf|otf|woff)">
    Header set Access-Control-Allow-Origin "*"
</FilesMatch>

# nginx config
if ($filename ~* ^.*?\.(eot)|(ttf)|(woff)$){
    add_header Access-Control-Allow-Origin *;
}

这将设置 Access-Control-Allow-Origin 系统配置，以允许所有的域。 列表以逗号隔开，如果你想为字体最多只有特定的域。 你要适当地服侍了所有的字体类型，浏览器偏好一类的情况。 为确保头设置正确，您可以使用下面的代码测试：

$ curl -I https://some.cdn.otherdomain.net/media/fonts/somefont.ttf

# Result
HTTP/1.1 200 OK
Server: Apache
X-Backend-Server: developer1.webapp.scl3.mozilla.com
Content-Type: text/plain; charset=UTF-8
Access-Control-Allow-Origin: *
ETag: "4dece1737ba40"
Last-Modified: Mon, 10 Jun 2013 15:04:01 GMT
X-Cache-Info: caching
Cache-Control: max-age=604795
Expires: Wed, 19 Jun 2013 16:22:58 GMT
Date: Wed, 12 Jun 2013 16:23:03 GMT
Connection: keep-alive

如果你看到 Access-Control-Allow-Origin: * 在响应中的代码中，那么就配置成功了，同样的策略是使用自举的CDN ，所以你知道它的好。

如果你想在你的 PHP 文件中实现，那么需要先设置 header 函数文件头信息

header("Access-Control-Allow-Origin: *");