最近在做我星際schub網站的時候，遇到了跨域問題，我先把後端node部署在了伺服器上，然後在本地localhost測試，出現了問題：

瀏覽器都提示我們使用這個header頭：

解決辦法：

1. CORS

伺服器設定響應頭：

response.setHeader("Access-Control-Allow-Origin", "*")

（這樣可能引起CSRF攻擊，一般設定成對應的域名就行，
response.setHeader("Access-Control-Allow-Origin", "http:localhost:8080/") ）
fetch的option加上 mode:"cors"。

（需要注意的是，如果要傳送Cookie，Access-Control-Allow-Origin就不能設為星號，必須指定明確的、與請求網頁一致的域名。同時，Cookie依然遵循同源政策，只有用伺服器域名設定的Cookie才會上傳，其他域名的Cookie並不會上傳，且（跨源）原網頁程式碼中的document.cookie也無法讀取伺服器域名下的Cookie。）
關於CORS的講解，可以看阮一峰的這篇文章：

2.jsonp

jsonp的方式，注意這種方式只能傳送get請求，就算指定為post，最後傳送的還是get，且跟上面方式一樣，也需要伺服器的配合支援。之前在做vue音樂播放器專案的時候，呼叫的是qq音樂的介面，qq音樂的介面返回的就是jsonp格式的

1、 jsonp傳送的並不是ajax請求；
2、 利用動態建立一個script標籤，因為script標籤是沒有同源策略限制的，是可以跨域的；
3、 把這個script標籤的src指向我們請求的服務端地址，這個地址會攜帶一個引數：callback ,一個回撥函式，服務端會把資料通過這個回撥函式返回給客戶端，但是客戶端沒有這個函式怎麼接收呢？所以在傳送請求之前，要在全域性（window）註冊這樣一個方法，利用這個方法，來獲得資料；
4、 這個回撥函式名需要跟服務端約定好，是一致的。

如果讓我們用原生js實現一個jsonp，那就是這樣：

     <script>
         //指定的回撥函式
         function showData (result) {
             var data = JSON.stringify(result); //json物件轉成字串
             $("#text").val(data);
         }
 
         $(document).ready(function () {
 
             $("#btn").click(function () {
                 //向頭部輸入一個指令碼，該指令碼發起一個跨域請求
                 $("head").append("<script src='http://localhost:9090/student?callback=showData'><\/script>");
             });
 
         });
     </script>
 

後端一是獲取到前端傳過來的回撥函式名稱，二是獲取到資料，最後把資料用回撥函式包圍住，執行這個前端的這個回撥函式。我們就可以利用前端這個事先全域性註冊的回撥函式來顯示操作資料了。

用Java寫的後臺demo就是這樣：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  response.setCharacterEncoding("UTF-8");
  response.setContentType("text/html;charset=UTF-8");

  //資料
  List<Student> studentList = getStudentList();


  JSONArray jsonArray = JSONArray.fromObject(studentList);
 String result = jsonArray.toString();

 //前端傳過來的回撥函式名稱
 String callback = request.getParameter("callback");
 //用回撥函式名稱包裹返回資料，這樣，返回資料就作為回撥函式的引數傳回去了
 result = callback + "(" + result + ")";

 response.getWriter().write(result);
}

這裡再分析一下jQuery關於jsonp的實現。

1.最簡單的方式：

   $.ajax({
            type:"GET",
            url:"http://www.xxx.com/getMySeat", //訪問的連結
            dataType:"jsonp",  //資料格式設定為jsonp
            success:function(data){  //成功的回撥函式
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

服務端程式碼不變，最簡單的方式，只需配置一個dataType:'jsonp'，就可以發起一個跨域請求。jsonp指定伺服器返回的資料型別為jsonp格式，可以看發起的請求路徑，自動帶了一個callback=xxx，callback是自己不手動設定引數名字的預設值，xxx是jquery隨機生成的一個回撥函式名稱。
這裡的success就跟上面的showData一樣，如果有success函式則預設success()作為回撥函式。

2.回撥函式你可以寫到script下(預設屬於window物件)，或者指明寫到window物件裡，看jquery原始碼，可以看到jsonp呼叫回撥函式時，是呼叫的window.callback。
然後看呼叫結果，發現，請求時帶的引數是：callback=showData；呼叫回撥函式的時候，先呼叫了指定的showData，然後再呼叫了success。所以，success是返回成功後必定會呼叫的函式，就看你怎麼寫了。
指定回撥函式名稱，加一個option欄位即可：

最後還是會呼叫success：

1. 如何改變callback這個預設值(回撥函式名稱的key值)，在jq裡：
   
   這樣一改之後，響應的後端程式碼也要改動了，獲取的欄位key值就是theFunction了，
   
   對應的請求路徑也就變了：
   

除了jq對jsonp的實現，在上面提到的vue音樂播放器專案中，我使用了jsonp npm包，用這個包，就不需要自己在window上註冊回撥函式，qq音樂介面中jsonpCallback就是服務端返回的回撥函式（a方法） 我們本地在window上註冊的a方法是在呼叫的jsonp庫中自動被實現。我們自己寫成promise的方法後直接then即可。

但是後來我又遇到一個問題，schub星際網站專案中我想呼叫WCS職業聯賽積分賽排名的介面的時候，用fetch當然還是提示跨域問題了，這時候後端我又不能修改，所以CORS方式肯定不行，jsonp的方式也需要後端配合支援，上面兩種方法都不適用了。下面就是最終解決問題的第三種方法。

1. 代理伺服器，跨域問題是瀏覽器的同源策略限制，伺服器之間是沒有的，那我們先把請求給我們的代理伺服器，再讓我們的代理伺服器去呼叫這個介面，在傳送給前端就可以了。

前端：

代理伺服器(node)：

注意伺服器返回的資料在response.data裡，然後傳送給前端的響應res。
(後來我前後端設定的埠不同，代理伺服器也要設定Access-Control-Allow-Origin的頭為 *)

4.第四點我想談下不同跨域方式中關於cookie的。

在後面的部落格將會談到cookie再跨域中的問題。