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

发布于 2018-03-04 09:32:34 字数 1613 浏览 3656 评论 0

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

设置 .htaccesshttpd.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: *");

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。