瀏覽器跨域問題

問題緣由

跨域是指從一個域名的網頁去請求另外一個域名的資源。瀏覽器出於安全的考慮，不容許不一樣源的請求：

解決方法

CORS

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。它容許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

CORS須要瀏覽器和服務器同時支持。目前，全部瀏覽器都支持該功能，IE瀏覽器不能低於IE10。

整個CORS通訊過程，都是瀏覽器自動完成，不須要用戶參與。對於開發者來講，CORS通訊與同源的AJAX通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。
所以，實現CORS通訊的關鍵是服務器。只要服務器實現了CORS接口，就能夠跨源通訊。

Nginx設置

add_header 'Access-Control-Max-Age' 86400;
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE,PUT;
add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

對於IE8/9 須要使用jquery.xdomainrequest.min.js，而且添加相應header：

proxy_set_header  'Content-Type' 'application/json; charset=utf-8';

而且設置：

JQuery.support.cors = true;

JSONP

JSONP和JSON好像啊，他們之間有什麼聯繫嗎？
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。對於JSON你們應該是很瞭解了吧，不是很清楚的朋友能夠去json.org上了解下，簡單易懂。
JSONP是JSON with Padding的略稱。它是一個非官方的協議，它容許在服務器端集成Script tags返回至客戶端，經過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）

JS例子：

<script type="text/javascript">
$.ajax({
    url:"http://localhost:20002/MyService.ashx?callback=?",   
    dataType:"jsonp",
    jsonpCallback:"person",
    success:function(data){
        alert(data.name + " is a a" + data.sex);
    }
 });
</script>

Java端：

@RequestMapping(value = "/test", method = RequestMethod.GET)
public @ResponseBody JSONPObject test(HttpServletResponse response, String callback) {
    Map<String, String> map = new HashMap<String, String>();
    map.put("aaa", "I'm Dreamlu！");
    return new JSONPObject(callback, map); //hellojsonp({"aaa":"I'm Dreamlu！"})
}

注意：JSONP須要服務端支持，不能簡單的配置Nginx實現

反向代理

經過把非同源請求用同源代理的方式來饒過跨域限制。

proxy_pass http://xxxxx/xxx.do

比較

• CORS對瀏覽器有要求，但對先後端的技術實現無改變
• JSONP對瀏覽器沒有要求，但其最終是經過GET方法訪問服務，限制了數據大小，而且對服務端技術實現有很大依賴
• 反向代理對瀏覽器和技術實現均無要求，但限制了部署的靈活性