到底什么是跨域？附解決方案！

什么是跨域

要了解跨域，先要說說同源策略。同源策略是由 Netscape 公司提出的一個著名的安全策略，所有支持 JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協議，端口相同。當頁面在執行一個腳本時會檢查訪問的資源是否同源，如果非同源，那么在請求數據時，瀏覽器會在控制台中報一個異常，提示拒絕訪問。

同源策略一般又分為以下兩種：

DOM同源策略：禁止對不同源頁面DOM進行操作。這里主要場景是iframe跨域的情況，不同域名的iframe是限制互相訪問的。XmlHttpRequest同源策略：禁止使用XHR對象向不同源的服務器地址發起HTTP請求。

那么，到底什么是跨域？

跨域，指的是從一個域名去請求另外一個域名的資源。即跨域名請求！跨域時，瀏覽器不能執行其他域名網站的腳本，是由瀏覽器的同源策略造成的，是瀏覽器施加的安全限制。

跨域的嚴格一點來說就是只要協議，域名，端口有任何一個的不同，就被當作是跨域。

為什么要跨域？

現實工作開發中經常會有跨域的情況，因為公司會有很多項目，也會有很多子域名，各個項目或者網站之間需要相互調用對方的資源，避免不了跨域請求。

跨域解決方案

通過jsonp跨域

document.domain + iframe跨域

location.hash + iframe

window.name + iframe跨域

postMessage跨域

跨域資源共享（CORS）

nginx代理跨域

nodejs中間件代理跨域

WebSocket協議跨域

方法一：jsonp

1、使用jquery的getJSON()方法，需要注意的是，url中要添加一個參數：callback=?

var id_number = $("#idNumber").val();
var user_name = $("#staffName").val();
var url = "http://132.228.156.103:9188/DataSync/CheckResult?callback=?&SeqNo=1&ChannelID=1003" +
"&ID="+id_number+"&Name="+user_name;    
$.getJSON(url,function(data){
　　if(data.result == "00"){
　　　　console.log(data.smsg);
　　}
});

2、ajax，dataType：“jsonp”，必須是get請求

var url = "http://132.228.156.103:9188/DataSync/CheckResult?callback=?&SeqNo=1&ChannelID=1003" +
"&ID="+id_number+"&Name="+user_name;
$.ajax({
　　type:'GET',
　　url : url,
　　jsonpCallback: 'jsonCallback',
　　contentType: "application/json",
　　dataType:"jsonp",
　　success:function(json){
　　　　alert(json);
　　}
});

以上兩種方式都需要被調用方在返回json的方法中做特殊處理，如下：

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
　　response.setContentType("text/html");
　　PrintWriter out = response.getWriter();
　　//jsonp1387251011756
　　String callback = request.getParameter("callback");
　　System.out.println("callback = "+callback);
　　String json = "{'msg':'sina news'}";
　　out.println(callback+"("+json+")");
}

否則會報下面的異常：

如果無法操作提供接口的服務器端的代碼，此種方法可以放棄。

方法二：在調用方代碼里添加Header

在controller中添加

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods", "POST");

 需要注意的是，盡量省去不必要的ajax請求參數，比如contentType : false, processData : false,等，某些參數可能造成請求失敗，或參數無法傳遞。

$.ajax({
    url : localroot + "/v1/findDisplayData",
    type : 'POST',
    data : {
        searchDate : searchDate,
        productList : productList
    },
    success : function(data) {}