CSS-字体被跨域资源共享策略阻止（字体跨域问题）

25-03-17 7

最近很多小伙伴都在问CSS-字体被跨域资源共享策略阻止和字体跨域问题这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展AJAX跨域请求和CORS跨域资源共享、AmazonS3CORS

最近很多小伙伴都在问CSS-字体被跨域资源共享策略阻止和字体跨域问题这两个问题，那么本篇文章就来给大家详细解答一下，同时本文还将给你拓展AJAX跨域请求和CORS跨域资源共享、Amazon S3 CORS（跨域资源共享）和Firefox跨域字体加载、CORS - 跨域资源共享、cors 跨域资源共享实现等相关知识，下面开始了哦！

本文目录一览：

CSS-字体被跨域资源共享策略阻止（字体跨域问题）
AJAX跨域请求和CORS跨域资源共享
Amazon S3 CORS（跨域资源共享）和Firefox跨域字体加载
CORS - 跨域资源共享
cors 跨域资源共享实现

CSS-字体被跨域资源共享策略阻止（字体跨域问题）

当人们开始订购过程时，在我的网站https://www.stubwire.com上，我正在从https://files.stubwire.com加载CSS文件。问题是CSS文件正在尝试加载给出错误的字体。有人可以帮我展示如何解决此问题吗？我已经看到有关使用Amazon S3的修复程序，但这是从我们自己的服务器加载的。

错误

跨域资源共享策略已阻止从源“ https://files.stubwire.com ”加载字体：所请求的资源上不存在“ Access-Control-Allow-Origin”标头。因此，不允许访问来源“

@font-face {    font-family: ''DroidSansRegular'';    src: url(''fonts/DroidSans-webfont.eot'');    src: url(''fonts/DroidSans-webfont.eot?#iefix'') format(''embedded-opentype''),         url(''fonts/DroidSans-webfont.woff'') format(''woff''),         url(''fonts/DroidSans-webfont.ttf'') format(''truetype''),         url(''fonts/DroidSans-webfont.svg#DroidSansRegular'') format(''svg'');    font-weight: normal;    font-style: normal;}

答案1

小编典典

如果控制服务器，则可以调整服务器Apache/Nginx的设置或将Access-Control-Allow-Origin标头添加到HTTP响应的内容。

在您的情况下，您可能想要类似的东西（这将允许您的域访问字体，但阻止其他域使用它，包括您自己的子域）：

Access-Control-Allow-Origin: https://www.stubwire.com

我Access-Control-Allow-Origin从以下位置获得了标头用法

这是另一个资源，提供了有关如何设置各种服务器（IIS，Nginx，Apache）以添加Access-Control-Allow-Origin标头的示例

AJAX跨域请求和CORS跨域资源共享

同源策略限制：

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果没有同源策略，攻击者可以通过JavaScript获取你的邮件以及其他敏感信息，比如说阅读私密邮件，发送虚假邮件，查看聊天记录等等。所谓同源是指，协议，域名，端口相同。三者只有有一个不相同，就认为不同源！

例如：域：http://store.company.com/dir/index.html

协议不同：https://store.company.com/dir/index.html
端口不同：http://store.company.com:81/dir/index.html
主机名不同：http://news.company.com/dir/index.html

跨域请求：

1. 对于主域相同而子域不同的例子，可以通过设置document.domain的办法来解决。

ajax不允许跨子域请求，但是iframe可以！可以通过提升域的方法来实现。

例如www.a.com/a.html和a.com/b.html为例，只需在a.html中添加一个b.html的iframe，并且设置两个页面的document.domain都为’a.com’（只能为主域名），两个页面之间即可互相访问了。

如果b.html要访问a.html，可在子窗口（iframe）中通过window.parent来访问父窗口的window对象。

例如www.a.com/a.html中的script：

document.domain='a.com';//提升域
varifr = document.createElement('iframe');
ifr.src = 'http://a.com/b.html';
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function(){
  //获取iframe的document对象
  //W3C的标准方法是iframe.contentDocument，
  //IE6、7可以使用document.frames[ID].document
  //为了更好兼容，可先获取iframe的window对象iframe.contentwindow
  vardoc = ifr.contentDocument || ifr.contentwindow.document;
  // 在这里操纵b.html
  alert(doc.getElementById("test").innerHTML);

而a.com/b.html:

<!DOCTYPE >
<html>
<head>
<title></title>
<scripttype="text/javascript">
  document.domain='a.com';//提升域
</script>
</head>
<body>
<h1id="test">Hello World</h1>
</body>
</html>

但是，这种方法只支持同一根域名下的页面！baidu.com和google.com的话，想想就好(●’◡’●)

复习：本来在同一个 origin 下，父页面可以通过 iframe.contentwindow 直接访问 iframe 的全局变量、DOM 树等，iframe 可以也通过 parent/top 对父页面做同样的事情。

不同 origin 下，还有一种标准的方法是通过HTML5的 .postMessage() 互相通信，不标准的方法是利用 location.hash 等奇技淫巧。

JSONP：

JSONP(JSON with Padding)是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。

原理：含有src属性的标签都可以跨域，如img、script、iframe！

本质：只是执行了javascript脚本！

简单来说，就是在客户端声明回调函数之后，客户端通过script标签向服务器跨域请求数据，然后服务端返回相应的数据并动态执行回调函数（返回带数据参数的回调函数的字符串，在客户端刚好被动态执行了！）。

看实例：

<script type="text/javascript"> function jsonpCallback(result) { alert(result); } var JSONP=document.createElement("script"); JSONP.type="text/javascript"; JSONP.src="你的请求地址?callback=jsonpCallback";//在请求的地址后面带上回调函数，客户端声明的jsonpCallback  document.getElementsByTagName("head")[0].appendChild(JSONP); </script>

或者：

<script type="text/javascript"> //注意：这个回调函数需要声明在前，js链接调用在后！ function jsonpCallback(result) { alert(result); } </script>  
<script type="text/javascript" src="你的请求地址?callback=jsonpCallback"></script>

后台返回的大概结果：

jsonpCallback({a:1,b:2});//类似的字符串，在js脚本中可以被动态执行，此来就可以拿到数据啦

但是，相应的弊端也出现了！这种方法每当页面加载就执行，而不是按事件触发去动态执行的！因而出现了jsonp的封装，在需要的时候动态调用！

jsonp封装：

大概形式：jsonp(url,data,callback)

大概步骤思路：

动态添加script标签，并将其加入页面中
组装传入的数据参数data
给每个回调函数唯一命名，设置回调请求成功或失败之后的处理
最后无论请求成功还是失败，都要删除创建的javascript标签。

示例：（转自博文自己封装的JSONP跨域函数：http://blog.csdn.net/liusaint1992/article/details/50959571）

function JSONP(url,config){  
    var data = config.data || [];  
    var paraArr=[],paraString='';//get请求的参数。 
    var urlArr;  
    var callbackName;//每个回调函数一个名字。按时间戳。 
    var script,head;//要生成script标签。head标签。 
    var supportLoad;//是否支持 onload。是针对IE的兼容处理。 
    var onEvent;//onload或onreadystatechange事件。 
    var timeout = config.timeout || 0;//超时功能。 

    for(var i in data){  
        if(data.hasOwnProperty(i)){  
            paraArr.push(encodeURIComponent(i) + "=" +encodeURIComponent(data[i]));  
        }  
    }  

    urlArr = url.split("?");//链接中原有的参数。 
    if(urlArr.length>1){  
        paraArr.push(urlArr[1]);  
    }  

    callbackName = 'callback'+new Date().getTime();  
    paraArr.push('callback='+callbackName);  
    paraString = paraArr.join("&");  
    url = urlArr[0] + "?"+ paraString;  

    script = document.createElement("script");  
    script.loaded = false;//为了实现IE下的onerror做的处理。JSONP的回调函数总是在script的onload事件（IE为onreadystatechange）之前就被调用了。因此我们在正向回调执行之时，为script标签添加一个属性，然后待到onload发生时，再检测有没有这个属性就可以判定是否请求成功，没有成功当然就调用我们的error。 

    //将回调函数添加到全局。 
    window[callbackName] = function(arg){  
        var callback = config.callback;  
        callback(arg);  
        script.loaded = true;  
    }  

    head = document.getElementsByTagName("head")[0];  
    head.insertBefore(script,head.firstChild) //chrome下第二个参数不能为null 
    script.src = url;  

    supportLoad = "onload" in script;  
    onEvent = supportLoad ? "onload" : "onreadystatechange";  

    script[onEvent] = function(){  

        if(script.readyState && script.readyState !="loaded"){  
            return;  
        }  
        if(script.readyState == 'loaded' && script.loaded == false){  
            script.onerror();  
            return;  
        }  
        //删除节点。 
        (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));    
        script = script[onEvent] = script.onerror = window[callbackName] = null;  

    }  

    script.onerror = function(){  
        if(window[callbackName] == null){  
            console.log("请求超时，请重试！");  
        }  
        config.error && config.error();//如果有专门的error方法的话，就调用。 
        (script.parentNode && script.parentNode.removeChild(script))&& (head.removeNode && head.removeNode(this));    
        script = script[onEvent] = script.onerror = window[callbackName] = null;  
    }  

    if(timeout!= 0){  
        setTimeout(function() {  
            if(script && script.loaded == false){  
                window[callbackName] = null;//超时，且未加载结束，注销函数 
                script.onerror();                 
            }  
        },timeout);  
    }  

}

jQuery中对JSONP的实现：

jQuery中提供了两个方法来实现：$.getJSON()和$.ajax(),常用的是底层的$.ajax()方法！

1.$.getJSON()：

$.getJSON(url?jsoncallback=?,fn(data){…})

关键点：在url后带上参数jsoncallback=?，后台返回随机命名的callback函数！会被Jquery自动替换成回调方法的名称!

<script type="text/javascript"> $.getJSON("http://localhost:3856/GetItemCates.ashx/GetItemCats?gateid=20&format=json&jsoncallback=?",function (data) { var myprops = data.itemcats_get_response.item_cats.item_cat; $.each(myprops,function (index,item) { $("ul").append("<li>" + item.name + "," + item.cid + "</li>") }); } ); </script>

2. $.ajax():

$.ajax({
url: url,
data: data,
dataType : “jsonp”,
jsonp: “jsoncallback”,
jsonpCallback:”success_jsonpCallback”,
success: callback
});

$.ajax({
     type : "get",//jquey是不支持post方式跨域的
     async:false,url :"http://api.taobao.com/apitools/ajax_props.do",//跨域请求的URL
     dataType : "jsonp",//传递给请求处理程序，用以获得jsonp回调函数名的参数名(默认为:callback)
     jsonp: "jsoncallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
     jsonpCallback:"success_jsonpCallback",//成功获取跨域服务器上的json数据后,会动态执行这个callback函数
     success : function(json){ 
             alert(json);
     }
});

以上的jsonp和jsonpCallback可以自定义回调函数名和参数名！

注意：

需要服务器端的支持才行。
只支持get请求

CORS跨域资源共享（真正跨域）

跨域资源共享（CORS ）是一种网络浏览器的技术规范，它为Web服务器定义了一种方式，允许网页从不同的域访问其资源。 CORS就是为了让AJAX可以实现可控的跨域访问而生的

CORS与JSONP相比:

JSONP只能实现GET请求，而CORS支持所有类型的HTTP请求。
使用CORS，开发者可以使用普通的XMLHttpRequest发起请求和获得数据，比起JSONP有更好的错误处理。
JSONP主要被老的浏览器支持，但它们往往不支持CORS，而绝大多数现代浏览器都已经支持了CORS。

本质是HTML5 xhr level2原生ajax请求！

只需要在后台中加上响应头来允许域请求！在被请求的Response header中加入以下设置，就可以实现跨域访问了！

//指定允许其他域名访问
'Access-Control-Allow-Origin:*'//或指定域
//响应类型
'Access-Control-Allow-Methods:GET,POST'
//响应头设置
'Access-Control-Allow-Headers:x-requested-with,content-type'

后台的娃助我(●’◡’●)

总结：整理了同源策略限制，出现了跨域请求的需求，原生传统的跨域请求方式，原生js和jQuery中对跨域的处理（JSONP）,以及HTML5 中的CORS跨域资源共享。系统条理得梳理好传说中的跨域了！o(^▽^)o

Amazon S3 CORS（跨域资源共享）和Firefox跨域字体加载

Firefox存在一个长期存在的问题，即不加载与当前网页不同来源的字体。通常，在CDN上提供字体时会出现问题。

随着Amazon S3 CORS的推出，是否存在使用CORS解决Firefox中字体加载问题的解决方案？

编辑：非常高兴看到S3 CORS配置的示例。

edit2：我找到了一个可行的解决方案，但实际上并没有理解它的作用。如果任何人都可以提供有关配置的更详细的解释以及亚马逊解释配置时发生的背景魔术，那将不胜感激，就像nzifnab为其提供赏金一样。

答案1

小编典典

好的，我终于通过下面的配置使字体工作了，对文档中的示例进行了一些调整。

我的字体托管在S3上，但在Cloudfront前面。

我不确定为什么会起作用，我的猜测可能是<AllowedMethod> GET和<AllowedHeader> Content-*所需要的。

如果精通Amazon S3 CORS配置的任何人都可以对此有所了解，将不胜感激。

<?xml version="1.0" encoding="UTF-8"?><CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">    <CORSRule>        <AllowedOrigin>https://mydomain.com</AllowedOrigin>        <AllowedMethod>GET</AllowedMethod>        <MaxAgeSeconds>3000</MaxAgeSeconds>        <AllowedHeader>Content-*</AllowedHeader>        <AllowedHeader>Host</AllowedHeader>    </CORSRule>    <CORSRule>        <AllowedOrigin>https://*.mydomain.com</AllowedOrigin>        <AllowedMethod>GET</AllowedMethod>        <MaxAgeSeconds>3000</MaxAgeSeconds>        <AllowedHeader>Content-*</AllowedHeader>        <AllowedHeader>Host</AllowedHeader>    </CORSRule></CORSConfiguration>

编辑：

一些开发人员面临Cloudfront缓存Access-Control-Allow-Origin标头的问题。AWS工作人员已在下面的链接中解决了此问题，

作为解决方法，建议从链接线程使用 查询字符串 来区分来自不同域的调用。我将在这里重现简短的示例。

使用curl检查响应头：

域A：a.domain.com

curl -i -H "Origin: https://a.domain.com" http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

来自域A的响应头：

Access-Control-Allow-Origin: https://a.domain.comAccess-Control-Allow-Methods: GETAccess-Control-Max-Age: 3000Access-Control-Allow-Credentials: trueX-Cache: Miss from Cloudfront

域B：b.domain.com

curl -i -H "Origin: http://b.domain.com" http://hashhashhash.cloudfront.net/font.woff?http_b.domain.com

来自域B的响应头：

Access-Control-Allow-Origin: http://b.domain.comAccess-Control-Allow-Methods: GETAccess-Control-Max-Age: 3000Access-Control-Allow-Credentials: trueX-Cache: Miss from Cloudfront

您会注意到，Access-Control-Allow-Origin返回了不同的值，这些值已经超过了Cloudfront缓存。

CORS - 跨域资源共享

一.什么是CORS

   CORS - cross-origin resource sharing，即跨域资源共享。为什么有这个概念，首先介绍同源策略。
   同源策略 - URL由协议、主机名、端口和路径组成，如果两个URL的协议、主机名和端口相同，则表示同源。浏览器的同源策略，限制了来自不同源的文档或脚本，对当前文档读取或设置某些属性。
   简而言之就是浏览器出于网站安全性的考虑，限制不同源之间的资源相互访问的一种策略。
   以下操作具有同源策略的限制：
   (1)Ajax请求不能发送;
   (2)无法获取DOM元素并进行操作;
   (3)无法读取Cookie、LocalStorage 和 IndexDB.

二.CORS的影响

有过前后端开发的童鞋可能遇到过下面的情况：项目前后端分离的情况下开发的，Ajax请求本地开发的时候OK，为什么和同事联调的时候就出现问题？
因为CORS限制了不同源的Ajax请求不能发送。

三.解决JSON跨域Ajax请求的方案

1.设置Access-Control-Allow-Origin属性

   在HTTP的请求头中有一个Origin的头信息：表示请求的来源。在服务端的响应头里面对应有一个Access-Control-Allow-Origin的头信息：表示接受的跨域请求来源。假如这两个信息不一致，请求不会被接受。
   记得毕设的时候遇到过这个问题，当时前端请求的时候，后台返回 "No ''Access-Control-Allow-Origin'' header is present on the requested resource."
   如果解决这个问题？在服务端加上Access-Control-Allow-Origin-xxx的设置。
   在Git上找到了当时上传的代码片段：

    response.setHeader("Access-Control-Allow-Credentials", "true");// 证书可用
    response.setHeader("Access-Control-Allow-Methods", "GET,PUT");// 允许哪些HTTP方法可用
    response.setHeader("Access-Control-Allow-Origin", "*");// 允许哪些域名可用，这里设置的是通配符，表示所有域名都允许
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization,Content-Type");// 允许哪些头部信息是可用的
    response.setHeader("Access-Control-Max-Age", "30");// 指定本次预检请求的有效期，单位为秒。在有效期间，不用发出另一条预检请求

这种方式可以防止CSRF(跨站请求伪造)攻击。

2.JSONP

维基百科解释：

JSONP(JSON with Padding)是数据格式JSON的一种''使用模式''，可以让网页从别的域名要数据。另一个解决这个问题的新方法是跨域资源共享。由于同源策略，一般来说位于server1.example.com的网页无法与 server2.example.com的服务器沟通，而HTML的 <script>元素是一个例外。利用 <script>元素的这个开放策略，网页可以得到从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。用JSONP抓到的数据并不是JSON，而是任意的JavaScript，用 JavaScript解释器运行而不是用JSON解析器解析。

   "padding" 意为内联，就是将JavaScript加入JSON文档。内联与JSON文档的JavaScript调用一个函数，函数参数是JSON。函数参数提供了一种将数据传递给函数的方式。
   一份JSON文件并不是一个JavaScript程序。为了让浏览器可以在 <script>元素运行，从src里URL 回传的必须是可执行的JavaScript。服务器会在传给浏览器前将JSON数据填充到回调函数中。浏览器得到的回应已不是单纯的数据叙述而是一个脚本。
   该URL回传的是由函数调用包起来的动态生成JSON，这就是JSONP的"填充(padding)"的由来。
   虽然这个填充是浏览器运行背景中定义的某个回调函数，它也可以是变量赋值、if叙述或者是其他JavaScript叙述。JSONP要求(也就是使用JSONP模式的请求)的回应不是JSON也不被当作JSON解析——回传内容可以是任意的表达式，甚至不需要有任何的JSON，不过惯例上填充部分还是会触发函数调用的一小段JavaScript片段，而这个函数调用是作用在JSON格式的数据上的。
   原理：
       在页面中插入一个script标签，创建_callback方法，通过服务器配合执行_callback方法，并传入一些参数。实际上并不是Ajax请求。
       (1)客户端利用script标签可以跨域请求资源的性质，向网页中动态插入script标签，来向服务端请求数据;
       (2)服务端会解析请求的url,拿到回调函数(比如callback=testCallback)参数,之后将数据放入其中返回给客户端;
       (3)jsonp不同于平常的ajax请求,它仅仅支持GET类型的方式。

简单示例：
页面：

    var url=''http://www.baidu.com/"+"?callback=?'';
    $.ajax({
     url:url,
     dataType:''jsonp'',
     processData: false, 
     type:''get'',// JSONP只能使用GET
     success:function(data){
       // to do
     },
     error:function(XMLHttpRequest, textStatus, errorThrown) {
       // to do
     }});

后台代码：

    String callbackName = (String) request.getAttribute("callback");
    String json = ESBJSONUtil.objToJsons(results).toString();
    String renderStr = callbackName+"("+json+")";// 用参数callbackName在json外面再套一层，就变成了jsonp
    response.setContentType("text/html");
    response.setCharacterEncoding("utf-8");
    response.getWriter().write(renderStr);

jQuery里面还有一种插件— jquery-jsonp。

3.代理

可以通过 Nginx 或者 httpd 拦截请求，使之在同一个 domain 下面，代理访问，避免跨域问题。

cors 跨域资源共享实现

# PHP

// Support CORS
header("Access-Control-Allow-Origin: *");//允许任意域名请求
header("Access-Control-Allow-Methods: GET,POST,OPTIONS");//指定请求方式
header("Access-Control-Allow-Headers: Authorization,token");//接收指定字段头信息
header("Access-Control-Expose-Headers: Authorization,token"); //暴露返回指定字段头信息

// other CORS headers if any...
if ($_SERVER[''REQUEST_METHOD''] == ''OPTIONS'') {
    exit; // finish preflight CORS requests here
}

/*
GET 是从服务器获取数据
POST 向服务器发送所需要处理的数据
HEAD 获取与GET方法相应的头部信息
PUT 更新或者替换一个现有的资源
DELETE 删除一个服务器上的资源
TRACE 对传到服务器上的头部信息进行追踪
OPTION 获取该服务器支持的获取资源的http方法
*/

# JAVASCRIPT

setRequestHeader(''X-Request-With'', null);//可以避免浏览器发送OPTIONS请求, 测试无效囧·······

$.ajax({
        type: "post",
        url: ''http://***'',
        headers:{
            Authorization:mytoken
        },
        data: {
        },
        timeout: 5000,
        success: function(data, status, xhr) {
            console.log("返回头部信息："+xhr.getResponseHeader("token"));
            console.log("返回主体信息："+data);
        },
        error: function(xhr, type) {
            console.log("网络异常，请稍后再试！");
        }
    });

$.ajax({
        type: "post",
        url: ''http://****'',
        data: {
        },
        timeout: 5000,
        beforeSend: function(request) {
            request.setRequestHeader("Authorization", mytoken);
            request.setRequestHeader("x-request-with", null);
        },
        success: function(data, status, xhr) {
            console.log("返回头部信息为解密信息："+xhr.getResponseHeader("Authorization"));
            console.log("返回主体信息："+data);
        },
        error: function(xhr, type) {
            console.log("网络异常，请稍后再试！");
        }
    });

我们今天的关于CSS-字体被跨域资源共享策略阻止和字体跨域问题的分享就到这里，谢谢您的阅读，如果想了解更多关于AJAX跨域请求和CORS跨域资源共享、Amazon S3 CORS（跨域资源共享）和Firefox跨域字体加载、CORS - 跨域资源共享、cors 跨域资源共享实现的相关信息，可以在本站进行搜索。

本文标签：