为了账号安全,请及时绑定邮箱和手机立即绑定

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

/ 猿问

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

元芳怎么了 2019-09-08 12:04:09

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

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

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

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


查看完整描述

3 回答

?
蛊毒传说

所以你要做的是......在font files文件夹中放入一个htaccess文件,其中包含以下内容。

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

同样在你的远程CSS文件中,font-face声明需要font-file的完整绝对URL(本地CSS文件中不需要):

例如

@font-face {
    font-family: 'LeagueGothicRegular';
    src: url('http://www.example.com/css/fonts/League_Gothic.eot?') format('eot'),
         url('http://www.example.com/css/fonts/League_Gothic.woff') format('woff'),
         url('http://www.example.com/css/fonts/League_Gothic.ttf') format('truetype'),
         url('http://www.example.com/css/fonts/League_Gothic.svg')}

这将解决问题。需要注意的一点是,您可以准确指定应允许哪些域访问您的字体。在上面的htaccess中,我已经指定每个人都可以访问我的字体,"*"但是你可以将其限制为:

单个网址:

标题集设置Access-Control-Allow-Origin http://example.com



查看完整回答
反对 回复 2019-09-09
?
蝴蝶不菲

根据官方文档,浏览器在您使用时不喜欢它

Access-Control-Allow-Origin: "*"

标题,如果你也使用

Access-Control-Allow-Credentials: "true"

头。相反,他们希望你特别允许他们的出身。如果您仍然想要允许所有来源,您可以使用一些简单的Apache魔法来使其工作(确保您已mod_headers启用):

Header set Access-Control-Allow-Origin "%{HTTP_ORIGIN}e" env=HTTP_ORIGIN

浏览器需要Origin在所有跨域请求上发送标头。Access-Control-Allow-Origin如果您接受/计划接受请求,则文档明确声明您需要在标头中回显此标头。这就是这个Header指令正在做的事情。



查看完整回答
反对 回复 2019-09-09
?
偶然的你

不幸的是,接受的答案对我不起作用,因为我的网站CSS文件@import字体CSS文件,这些都存储在Rackspace Cloud Files CDN上。

由于从不生成Apache头文件(因为我的CSS不在Apache上),所以我必须做几件事:

  1. 转到Cloud Files UI并为每个字体很棒的文件添加一个自定义标题(Access-Control-Allow-Origin with value *)

  2. 将woff和ttf文件的Content-Type分别更改为font / woff和font / ttf

看看你是否可以逃脱#1,因为第二个需要一些命令行工作。

要在#1中添加自定义标头:

  • 查看该文件的云文件容器

  • 向下滚动到文件

  • 单击cog图标

  • 单击编辑标题

  • 选择Access-Control-Allow-Origin

  • 添加单个字符'*'(不带引号)

  • 打进去

  • 重复其他文件

如果你需要继续并做#2,那么你需要一个带CURL的命令行

curl -D - --header "X-Auth-Key: your-auth-key-from-rackspace-cloud-control-panel" --header "X-Auth-User: your-cloud-username" https://auth.api.rackspacecloud.com/v1.0

从返回的结果中,提取X-Auth-Token和X-Storage-Url的值

curl -X POST \
  -H "Content-Type: font/woff" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.woffcurl -X POST \
  -H "Content-Type: font/ttf" \
  --header "X-Auth-Token: returned-x-auth-token" returned-x-storage-url/name-of-your-container/fonts/fontawesome-webfont.ttf

当然,只有在使用Rackspace CDN时,此过程才有效。其他CDN可能提供类似的功能来编辑对象标题和更改内容类型,所以也许你会很幸运(并在这里发布一些额外的信息)。



查看完整回答
反对 回复 2019-09-09

添加回答

回复

举报

0/150
提交
取消
意见反馈 邀请有奖 帮助中心 APP下载
官方微信