前端的幾種跨域方法

跨域請求cookie傳不過去

跨域

CORS與JSONP的使用目的相同，可是比JSONP更強大。 JSONP只支持GET請求，CORS支持全部類型的HTTP請求。JSONP的優點在於支持老式瀏覽器，以及能夠向不支持CORS的網站請求數據。

1、跨域請求資源方案

1. 野路子出身卻好用的方式：JSONP；
2. 官方推薦的跨域資源共享方案：CORS；
3. 使用HTML5 API：postMessage；
4. 拋棄HTTP，使用：Web Sockets；

主要講一下jsonp使用方法

1，先準備環境：兩個服務端口不同，構成跨域請求的條件

請求數據：請求數據的端口爲8080

先看下直接發起ajax請求會怎麼樣

請求的結果以下圖：能夠看到跨域請求由於瀏覽器的同源策略被攔截了。

接下來看如何發起跨域請求。解決跨域請求的方式有不少，這裏只說一下jquery的jsop方式及其原理。

首先咱們須要明白，在頁面上直接發起一個跨域的ajax請求是不能夠的，可是，在頁面上引入不一樣域上的js腳本倒是能夠的，就像你能夠在本身的頁面上使用 標籤來隨意顯示某個域上的圖片同樣。

好比我在8080端口的頁面上請求一個9090端口的圖片：能夠看到直接經過src跨域請求是能夠的。

那麼看下如何使用 scirpt標籤來完成一個跨域請求：

  當點擊"跨域獲取數據"的按鈕時，添加一個scipt標籤，用於發起跨域請求；注意看請求地址後面帶了一個callback=showData的參數；

  showData便是回調函數名稱，傳到後臺，用於包裹數據。數據返回到前端後，就是showData(result)的形式，由於是script腳本，因此自動調用showData函數，而result就是showData的參數。

  至此，咱們算是跨域把數據請求回來了，可是比較麻煩，須要本身寫腳本發起請求，而後寫個回調函數處理數據，不是很方便。

再來看jquery的jsonp方式跨域請求：

服務端代碼不變，js代碼以下：最簡單的方式，只需配置一個dataType:'jsonp'，就能夠發起一個跨域請求。jsonp指定服務器返回的數據類型爲jsonp格式，能夠看發起的請求路徑，自動帶了一個callback=xxx，xxx是jquery隨機生成的一個回調函數名稱。

這裏的success就跟上面的showData同樣，若是有success函數則默認success()做爲回調函數。

再看看如何指定特定的回調函數：第30行代碼

  回調函數你能夠寫到script下(默認屬於window對象)，或者指明寫到window對象裏，看jquery源碼，能夠看到jsonp調用回調函數時，是調用的window.callback。

  而後看調用結果，發現，請求時帶的參數是：callback=showData；調用回調函數的時候，先調用了指定的showData，而後再調用了success。因此，success是返回成功後一定會調用的函數，就看你怎麼寫了。      

再看看如何改變callback這個名稱：第23行代碼。指定callback這個名稱後，後臺也須要跟着更改。

2，CORS請求後端設置

// * 表示容許任何域名跨域訪問
    response.setHeader("Access-Control-Allow-Origin", "*");
// 指定特定域名能夠訪問
  response.setHeader("Access-Control-Allow-Origin","http:localhost:8080/");
 
複製代碼