瀏覽器攔截跨域請求處理方法(已阻止跨源請求:同源策略禁止讀取遠程資源)

原文地址：http://my.oschina.net/lichaoqiang/blog/317823

在瀏覽器請求中，出現跨域訪問資源的問題，我們肯定會遇到。如果跨域請求被阻止，有可能導致css、js 、ajax請求、font字體等資源出現無法正常訪問的問題。接下來，就介紹下解決同源策略不允許讀取遠程資源的問題。

? ? 今天就談下遠程字體跨域的問題。

? ? 直接了當了說，解決此類問題，最直接的方法就是，就是給被請求的服務器，添加HTTP頭響應頭，這里提供兩種添加HTTP頭的方法：

????第一種，就是在程序中添加HTTP頭：? ?

如： Response.Headers.Add("Access-Control-Allow-Origin", "*");
// JSON
{'Access-Control-Allow-Origin': '*', 
}
// HTML
<meta http-equiv="Access-Control-Allow-Origin" content="*">
// PHP
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

? ?添加此段代碼的目的很簡單，也就是告訴瀏覽器，這個資源是運行遠程所有域名訪問的。當然，此處的*也可以替換為指定的域名，出于安全考慮，建議將*替換成指定的域名。

???第二種，就是在服務器上，添加HTTP響應頭。在這里，我們就以IIS6.0為例：

?? 在被請求的網站上，設置HTTP頭，添加“

//在被請求的網站上，設置HTTP頭，添加
"Access-Control-Allow-Origin:*" //值為*或指定的域名。

? ?第三種，使用JSONP格式，即在jQuery中ajax請求參數dataType:'JSONP'：? ?

<script> $.ajax({ url:"http://map.oicqzone.com/gpsApi.php?lat=22.502412986242&lng=113.93832783228", type:'GET', dataType:'JSONP',  // 處理Ajax跨域問題success: function(data){ $('body').append( "Name: " + data ); } }); 
</script>

? ?一般完成以上工作，就可以了。網上還有說在被請求服務器根目錄下創建:"crossdomain.xml"的文件。內容格式如下：

<?xml version="1.0"?>
<cross-domain-policy><allow-access-from domain="*" />
</cross-domain-policy>