zoukankan      html  css  js  c++  java
  • 解决Firefox下iconfont不显示的问题

    http://www.cnblogs.com/freshman0216/p/3825166.html

        何为跨域访问,为什么会有跨域限制?一切还得从浏览器的同源策略说起。

          同源策略:是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能会受到影响,可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。

          浏览器的同源策略:限制了来自不同源的“document”或脚本,对当前“document”读取或设置某些属性。同源策略的存在,限制了“源”自A的脚本只能操作“同源”页面的DOM,“跨源”操作来源于B的页面将会被拒绝。

          何为同源呢?“img.company.com”和"agent.company.com"算不算是同源呢?相当长的时间我都认为这两个域都是"company.com"的子域,算是同源的,这想法实际上是错的。

          同源:同主机(域名、子域或者IP地址相同)、同端口号、同协议。

    URL                 是否同源         原因                   
    http://agent.soufun.com/dir1/a.aspx          是  
    http://agent.soufun.com/dir2/a.aspx  是  
    https://agent.soufun.com/secure.htm  否  协议不同
    http://agent.soufun.com:81/dir2/a.aspx  否  端口不同
    http://img.soufun.com/dir/a.jpg  否  子域不同

          图标字体:现在主流浏览器(包括IE6)都支持CSS3的自定义字体(@font-face),因此可以尝试使用font来替换图片展示网站的各种icon。这样好处因为是矢量,放大不失真,体积小,缺点也很明显,就是同一时刻字体只能是单色。

          功能实现后,在IE上展示好好的(左下图),但到了火狐上图标字体却不显示了(右下图)。通过火狐Firebug的控制台发现如下报错“已 阻止交叉源请求:同源策略不允许读取 http://img.company.com/secondhouse/image/magentnew/styles/fonts20140704/icomoon.woff?ivldoa 上的远程资源。可以将资源移动到相同的域名上或者启用 CORS 来解决这个问题。

                 

          为什么IE和火狐下显示不一样呢?查资料得知“Firefox和IE9不支持对icon font字体的跨域访问”,需要在图标字体文件所在服务器配置Header参数“Access-Control-Allow-Origin”允许当前域名才可以。而且,经过验证,必须将参数“Access-Control-Allow-Origin”配置为“*”才可以,配置为“*.当前域名”并不可以,不知道啥原因。

          

          具体这个配置是怎么加上来的,因为是运维同事帮忙配置的,方法不得而知,可以参考《解决firefox和IE9对icon font字体的跨域访问问题》,核心是增加“Access-Control-Allow-Origin:*”的响应输出。在找运维同事帮忙添加配置前,为了确定方案可行性,利用Fiddler拦截http响应,添加了头部,具体可以参考《fiddler设置HTTP返回头的两种方式》,再次感受了Fiddler的强大的功能。

  • 相关阅读:
    LAMP应用 wdlinux 配置文件
    Linux mysql忘记root密码
    vim 编辑器 常用的设置
    Virtual PC(VPC)虚拟机安装CentOS 6.0网络配置
    缓存系统memcache的安装,配置和使用
    CentOS 去掉Last login提示/系统欢迎信息
    configure: error: GD build test failed. Please check the config.log for details.
    Centos 6.0 yum 更新源
    MySQL is running but PID file is not found
    Visual Studio快速开发以及Visual Studio 2010新功能介绍
  • 原文地址:https://www.cnblogs.com/qfly/p/7699165.html
Copyright © 2011-2022 走看看