猿问
下载APP

请问如何添加Access-Control-Allow-Origin标头

如何添加Access-Control-Allow-Origin标头

我正在设计一个网站(例如mywebsite.com),这个网站从另一个网站(比如anothersite.com)加载font-face字体。我在Firefox中遇到字体字体加载问题,我在这个博客上看到:

Firefox(支持v3.5中的@ font-face)默认情况下不允许跨域字体。这意味着必须从同一域(和子域)提供字体,除非您可以向字体添加“Access-Control-Allow-Origin”标头。

如何将Access-Control-Allow-Origin标头设置为字体?


元芳怎么了
浏览 121回答 3
3回答

蛊毒传说

所以你要做的是......在font files文件夹中放入一个htaccess文件,其中包含以下内容。<FilesMatch&nbsp;"\.(ttf|otf|eot|woff|woff2)$"> &nbsp;&nbsp;<IfModule&nbsp;mod_headers.c> &nbsp;&nbsp;&nbsp;&nbsp;Header&nbsp;set&nbsp;Access-Control-Allow-Origin&nbsp;"*" &nbsp;&nbsp;</IfModule></FilesMatch>同样在你的远程CSS文件中,font-face声明需要font-file的完整绝对URL(本地CSS文件中不需要):例如@font-face&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;font-family:&nbsp;'LeagueGothicRegular'; &nbsp;&nbsp;&nbsp;&nbsp;src:&nbsp;url('http://www.example.com/css/fonts/League_Gothic.eot?')&nbsp;format('eot'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url('http://www.example.com/css/fonts/League_Gothic.woff')&nbsp;format('woff'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url('http://www.example.com/css/fonts/League_Gothic.ttf')&nbsp;format('truetype'), &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;url('http://www.example.com/css/fonts/League_Gothic.svg')}这将解决问题。需要注意的一点是,您可以准确指定应允许哪些域访问您的字体。在上面的htaccess中,我已经指定每个人都可以访问我的字体,"*"但是你可以将其限制为:单个网址:标题集设置Access-Control-Allow-Origin&nbsp;http://example.com

蝴蝶不菲

根据官方文档,浏览器在您使用时不喜欢它Access-Control-Allow-Origin:&nbsp;"*"标题,如果你也使用Access-Control-Allow-Credentials:&nbsp;"true"头。相反,他们希望你特别允许他们的出身。如果您仍然想要允许所有来源,您可以使用一些简单的Apache魔法来使其工作(确保您已mod_headers启用):Header&nbsp;set&nbsp;Access-Control-Allow-Origin&nbsp;"%{HTTP_ORIGIN}e"&nbsp;env=HTTP_ORIGIN浏览器需要Origin在所有跨域请求上发送标头。Access-Control-Allow-Origin如果您接受/计划接受请求,则文档明确声明您需要在标头中回显此标头。这就是这个Header指令正在做的事情。

偶然的你

不幸的是,接受的答案对我不起作用,因为我的网站CSS文件@import字体CSS文件,这些都存储在Rackspace Cloud Files CDN上。由于从不生成Apache头文件(因为我的CSS不在Apache上),所以我必须做几件事:转到Cloud Files UI并为每个字体很棒的文件添加一个自定义标题(Access-Control-Allow-Origin with value *)将woff和ttf文件的Content-Type分别更改为font / woff和font / ttf看看你是否可以逃脱#1,因为第二个需要一些命令行工作。要在#1中添加自定义标头:查看该文件的云文件容器向下滚动到文件单击cog图标单击编辑标题选择Access-Control-Allow-Origin添加单个字符'*'(不带引号)打进去重复其他文件如果你需要继续并做#2,那么你需要一个带CURL的命令行curl&nbsp;-D&nbsp;-&nbsp;--header&nbsp;"X-Auth-Key:&nbsp;your-auth-key-from-rackspace-cloud-control-panel"&nbsp;--header&nbsp;"X-Auth-User:&nbsp;your-cloud-username"&nbsp;https://auth.api.rackspacecloud.com/v1.0从返回的结果中,提取X-Auth-Token和X-Storage-Url的值curl&nbsp;-X&nbsp;POST&nbsp;\ &nbsp;&nbsp;-H&nbsp;"Content-Type:&nbsp;font/woff"&nbsp;\ &nbsp;&nbsp;--header&nbsp;"X-Auth-Token:&nbsp;returned-x-auth-token"&nbsp;returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woffcurl&nbsp;-X&nbsp;POST&nbsp;\ &nbsp;&nbsp;-H&nbsp;"Content-Type:&nbsp;font/ttf"&nbsp;\ &nbsp;&nbsp;--header&nbsp;"X-Auth-Token:&nbsp;returned-x-auth-token"&nbsp;returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf当然,只有在使用Rackspace CDN时,此过程才有效。其他CDN可能提供类似的功能来编辑对象标题和更改内容类型,所以也许你会很幸运(并在这里发布一些额外的信息)。
打开App,查看更多内容
随时随地看视频慕课网APP
我要回答