JavaScript跨域問題解決辦法

1、什麼是跨域

       JavaScript出於安全方面的考慮，不容許跨域調用其餘頁面的對象。但在安全限制的同時也給注入iframe或是ajax應用上帶來了很多麻煩。這裏把涉及到跨域的一些問題簡單地整理一下：

      首先什麼是跨域，簡單地理解就是由於JavaScript同源策略的限制，a.com 域名下的js沒法操做b.com或是c.a.com域名下的對象。更詳細的說明能夠看下錶：

特別注意兩點：

       第一，若是是協議和端口形成的跨域問題「前臺」是無能爲力的，

       第二：在跨域問題上，域僅僅是經過「URL的首部」來識別而不會去嘗試判斷相同的ip地址對應着兩個域或兩個域是否在同一個ip上。
「URL的首部」指window.location.protocol +window.location.host，也能夠理解爲「Domains, protocols and ports must match」。

       接下來簡單地總結一下在「前臺」通常處理跨域的辦法，後臺proxy這種方案牽涉到後臺配置，這裏就不闡述了，有興趣的能夠看看yahoo的這篇文章：《JavaScript: Use a Web Proxy for Cross-Domain XMLHttpRequest Calls》

2、js調用接口跨域問題處理

如下截圖爲js調用接口出現跨域問題：

       加window.name參數   +   配置Allow-Origin頭   可處理：

接口作這兩個處理的部分代碼以下：

JSONObject json = new JSONObject();
//跨域參數
String origin = request.getHeader("Origin") == null? "www.baidu.com.cn" : request.getHeader("Origin");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Origin", origin); 
String windowName = env.param("windowName", null); //window.name
if("POST".equals(method)){        //判斷方法是否post
    ....
}else{
	 json.put("uri", uri);
	 json.put("result", "0");
	 json.put("msg", "請求方法不是POST,操做失敗");
} 

if (!T.isBlank(windowName) && "1".equals(windowName)) {	
	request.setAttribute("json", "<script>window.name='" + json.toJSONString() + "';</script>"); 
} else {
	request.setAttribute("json", json.toJSONString());
}

接口作了以上兩個處理，能解決跨域問題，能成功post數據到接口了。

備註：上圖代碼中origin跨域代碼中，更優寫法以下：

//跨域參數
String origin = request.getHeader("Origin");
if (!T.isBlank(origin)) {
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Origin", origin);
}

3、跨域參考資料以及詳細總結

       http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html