解决firefox和IE9对icon font字体的跨域访问问题

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

同源策略:是浏览器最核心也是最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能会受到影响,可以说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的强大的功能。

解决firefox和IE9对icon font字体的跨域访问问题,布布扣,bubuko.com

时间: 2024-12-14 08:04:56

解决firefox和IE9对icon font字体的跨域访问问题的相关文章

icon font字体图标字库汇总

最近在研究icon font图标字库,找了一些比较好的在线字库.大都是开源的,而且各有特色! 阿里icon font字库 http://www.iconfont.cn/ 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库. fontello http://fontello.com/ 在线定制你自己的icon font字体图标字库,也可以直接从GitHub下载整个图标集,该项目也是开源的. icomoon http://icomoon.io/app/#/s

【Todo】JS跨域访问问题的解决

做双十一,需要在主会场页面,嵌入我们产品的JS豆腐块.而这个豆腐块需要调用我们后端的数据接口,涉及跨域访问. 参考 http://www.cnblogs.com/2050/p/3191744.html 方案1: 在js中,我们虽然不能直接用XMLHttpRequest请求不同域上的数据时,但是在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. jquery的jsonp形式: 服务器端如下: protected void Page_Load(object sende

ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法

原文:ArcGIS API for Silverlight 调用WebService出现跨域访问报错的解决方法 群里好几个朋友都提到过这样的问题,说他们在Silverlight中调用了WebService方法,总报这个错误,贴图如下: 解决办法: 1.确定你的Silverlight项目及承载Silverlight的Web程序根目录下都包含2个跨域文件,分别是crossdomain.xml和clientaccesspolicy.xml: crossdomain.xml文件,如下: <?xml ve

解决跨域访问

解决跨域访问的方法 1.用响应头 response.setHeader("Access-Control-Allow-Origin","*");//允许哪些服务器访问 response.setHeader("Access-Control-Allow-Methods","GET POST");//允许的提交方式 2.使用代理 3.JSONP 原理:通过JavaScript标签来访问服务器,并接受服务器返回的数据来实现跨域访问 js

Jetty Cross Origin Filter解决jQuery Ajax跨域访问的方法

当使用jQuery Ajax post请求时可能会遇到类似这样的错误提示 XMLHttpRequest cannot oad http://xxxxxx. Origin http://xxxxxx is not allowed by Access-Control-Allow-Origin. 这是Ajax跨域访问权限的问题,服务器端不接受来自另一个不同IP地址的由脚本文件发出的http请求.解决这个问题需要在服务器端进行配置使服务器端可以接受来自不同域的脚本文件的http请求.一个简单的解决方法是

用jQuery与JSONP轻松解决跨域访问的问题【转】

原文地址:http://www.jb51.net/article/46463.htm 好在,有jquery帮忙,跨域问题似乎没那么难缠了.这次也借此机会对跨域问题来给刨根问底,结合实际的开发项目,查阅了相关资料,算是解决了跨域问题..有必要记下来备忘. 跨域的安全限制都是指浏览器端来说的.服务器端是不存在跨域安全限制的,所以通过本机服务器端通过类似httpclient方式完成“跨域访问”的工作,然后在浏览器端用AJAX获取本机服务器端“跨域访问”对应的url.来间接完成跨域访问也是可以的.但很显

深入理解jsonp解决跨域访问

在我们做的这个项目中充分利用jsonp跨域这一个特性,完成了简单的单点登录功能和权限统一认证控制,实现思路并不复杂同各种实现单点登录的产品相比可以说微不足道,各有各的好处.各有各的优点,选择什么方式实现完全取决于我们自己或者项目经理的开发经验,对各种框架的理解程度往往决定了目前开发项目的整体架构. 这不是一项凭空产生的新东西,仅仅是JS的一个特性而已之前没有被我们提及也没有被我们注意到原来经常使用的js还可以跨域呢,觉的我们对已经学过的东西理解还不是不够深入.有些肤浅,JS绝大多数在浏览器中运行

使用JSONP彻底解决Ajax跨域访问Cookie Session的方案

最近做开发时要把图片文件放到另外一台服务器上(另外一个域名),因为这样分布式存放,网站打开速度会快很多.而我采用AJAX获取图片服务器上某用户的图片时遇到了问题,按照通常的方式无法获取信息,得到的Cookie都是null,后来想到浏览器出于安全考虑JavaScript和iframe不能跨域访问,那我们就要考虑使用其他途径来完成了,捣鼓了2天终于找到了解决方案,我使用JSONP来解决,请看. JS代码: $.ajax({ type: "get", url: "http://ww

解决cookie跨域访问

一.前言 随着项目模块越来越多,很多模块现在都是独立部署.模块之间的交流有时可能会通过cookie来完成.比如说门户和应用,分别部署在不同的机器或者web容器中,假如用户登陆之后会在浏览器客户端写入cookie(记录着用户上下文信息),应用想要获取门户下的cookie,这就产生了cookie跨域的问题. 二.介绍一下cookie cookie 路径: cookie 一般都是由于用户访问页面而被创建的,可是并不是只有在创建 cookie 的页面才可以访问这个cookie.在默认情况下,出于安全方面