解决firefox和IE9对icon font字体的跨域访问问题
何为跨域访问，为什么会有跨域限制？一切还得从浏览器的同源策略说起。
同源策略：是浏览器最核心也是最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能会受到影响，可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。
浏览器的同源策略：限制了来自不同源的“document”或脚本，对当前“document”读取或设置某些属性。同源策略的存在，限制了“源”自A的脚本只能操作“同源”页面的DOM，“跨源”操作来源于B的页面将会被拒绝。
何为同源呢？“img.company.com”和"agent.company.com"算不算是同源呢？相当长的时间我都认为这两个域都是"company.com"的子域，算是同源的，这想法实际上是错的。
同源：同主机（域名、子域或者IP地址相同）、同端口号、同协议。
图标字体：现在主流浏览器（包括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的强大的功能。
解决firefox和IE9对icon font字体的跨域访问问题的更多相关文章
- 【docker】elasticsearch-head无法连接elasticsearch的原因和解决,集群健康值：未连接,ElasticSearch——跨域访问的问题
环境 ==================== 虚拟机启动 centos 7 ip:192.168.92.130 elasticsearch 5.6.9 port:9200 9201 elas ...
- icon font字体图标字库汇总
最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个i ...
- IE9 下面, XMLHttpRequest 是不支持跨域请求的解决方法
在 IE9 下面, XMLHttpRequest 是不支持跨域请求的. IE10 的 XMLHttpRequest 支持跨域, 而 IE8, IE9 需要使用 XDomainRequest 来实现跨域 ...
- 在Firefox中通过AJAX跨域访问Web资源---
一.解决在firefox中无法跨域访问的问题 AJAX从本质上讲就是命名用XMLHttpRequest组件来向服务端发送HTTP请求,请接收相应信息.至于成功接收到响应信息后的操作,就和普通的Web客 ...
- CP="CAO PSA OUR" 用P3P header解决iframe跨域访问cookie
1.IE浏览器iframe跨域丢失Session问题 在开发中,我们经常会遇到使用Frame来工作,而且有时是为了跟其他网站集成,应用到多域的情况下,而Iframe是不能保存Session的因此,网上 ...
- 解决cookie跨域访问
一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入c ...
- ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法
原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebServi ...
- 【Todo】JS跨域访问问题的解决
做双十一,需要在主会场页面,嵌入我们产品的JS豆腐块.而这个豆腐块需要调用我们后端的数据接口,涉及跨域访问. 参考 http://www.cnblogs.com/2050/p/3191744.html ...
- 用jQuery与JSONP轻松解决跨域访问的问题【转】
原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅 ...
随机推荐
- ubuntu网络配置&&ubuntu apt-get错误解决办法
网络配置: 方式1:网卡通过DHCP自动获取IP地址 $ sudo gedit /etc/network/interfaces # 修改文件/etc/network/interfaces如下文 #-- ...
- java 类反射记录
Class的getDeclaredMethod方法是获取当前类下的所有方法,包括private修饰的,该方法不获取父类的方法. getMethod获取父类及本类下的所有public方法.
- Dojo Data Store——统一数据访问接口
原文地址:http://www.infoq.com/cn/articles/wq-dojo-data-store 无论在传统的桌面应用还是在主流的互联网应用中,数据始终占据着软件应用中的核心地位.当下 ...
- JavaScript this用法总结
在JavaScript中,this关键字可以说是最复杂的机制之一.对this的作用机制缺乏比较深入的理解很容易在实际开发中出现问题. 1.this的作用 为什么要在JavaScript中使用this呢 ...
- 反射实现 AOP 动态代理模式(Spring AOP 的实现 原理)
好长时间没有用过Spring了. 突然拿起书.我都发现自己对AOP都不熟悉了. 其实AOP的意思就是面向切面编程. OO注重的是我们解决问题的方法(封装成Method),而AOP注重的是许多解决解决问 ...
- .Net Core CLI–Ubuntu 14安装
sudo sh -c 'echo "deb [arch=amd64] http://apt-mo.trafficmanager.net/repos/dotnet/ trusty main&q ...
- 【WPF】分享自用 白板窗口(空窗口) 控件 BlankWindow，基于WindowChrome。
一.背景 吃产品的亏,上设计的当,最后死在变化上. 现在的产品和设计都喜欢在窗口上做一些事,比如让Title做很多事,好像跟人家用一样的窗口很Low似的,好像真的挺Low的. 所以,还不如弄一个黑板似 ...
- 通过Measure & Arrange实现UWP瀑布流布局
简介 在以XAML为主的控件布局体系中,有用于完成布局的核心步骤,分别是measure和arrange.继承体系中由UIElement类提供Measure和Arrange方法,并由其子类Framewo ...
- angularjs组件之input mask
今天将奉献一个在在几个angularjs项目中抽离的angular组件 input mask.在我们开发中经常会对用户的输入进行控制,比如日期,货币格式,或者纯数字格式之类的限制,这就是input m ...
- .net程序单元测试介绍
什么是单元测试?为什么要进行单元测试?如需要进一步了解,请移步维基百科. 关于.net程序单元测试的文章,网上已经有很多,但我相信我写的这篇文章的内容是独特的,因为我在网上找了很久,都没找到关于Str ...