跨域请求问题

╰半橙微兮° 2021-11-09 05:04 407阅读 0赞

**开启 HTTPS 之后 网站出现字体文件跨域的问题 请问如何解决？**

作为一个懒人，我选择字体本地化…

首先，字体文件存储的服务器必须也要支持 HTTPS  
然后，如果字体所在的服务器和网站不是同一个域名，也就是跨域的话，需要在存储字体的服务器设置 Header  
access-control-allow-origin  
想省事一点的话就 access-control-allow-origin: \*，但是人家可以直接跨域引用你的字体文件，当然如果你不担心自己流量爆炸的话……随意吧

# font-face跨域办法 #

font-face是现在比较流行的技术，可以矢量化你的图标，更改颜色方便等等。如果你想更进一步了解他，请点击这里([CSS3 icon font完全指南][CSS3 icon font])  
今晚有网友问到font-face跨域在nginx下如何配置，印象中一淘UX有文章介绍办法，但打开文章里面相应的链接后发现没内容。  
搜了一下其他地方，大多数给出的都是一样的链接。

所以在这里补充一下内容：

**原因：**

Firefox对字体文件有加载限制，也就是说不允许你随便加载别人的字体，防止他人盗用字体。

**解决办法：**

1、把字体文件放在你网站根目录下。  
2、给字体文件的http头里面添加Access-Control-Allow-Origin属性，以控制指定域引用你的字体文件。

nginx:

server {
        ...
        # Fix @font-face cross-domain restriction in Firefox
        location ~* \.(ttf|ttc|otf|eot|woff|font.css)$ {
            add_header Access-Control-Allow-Origin "http://yoursite.com";
        }
        ...
    }

apache:

<FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
      <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://yoursite.com"
      </IfModule>
    </FilesMatch>

3、添加mine

AddType application/vnd.ms-fontobject .eot
    AddType font/ttf .ttf
    AddType font/otf .otf
    AddType application/x-font-woff woff

**css加载字体的跨域问题**

刚才碰到一个css加载字体跨域问题，记录一下啊。

站点的动态请求与静态文件请求是不同的域名的。站点的域名为 www.domain.com，而静态文件的域名为 st.domain.com。

问题：

页面中加载css文件：<link rel="stylesheet" href="http://st.domain.com/css/uniform.css" />

此css中调用了外部字体如下：

@font-face {
      font-family: 'FontAwesome';
      src: url('../font/fontawesome-webfont.eot');

浏览器报请求跨域的错误。

解决方案：

我们使用Access-Control-Allow-Origin：\* 通过启用cors 来解决跨域问题。