JSONP CORS WebSocket

honhon 發(fā)布于2019-08-21 17:34 / 1984人閱讀

摘要：下表給出了相對(duì)于同源檢測(cè)的結(jié)果跨域解決方法由兩部分組成回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)時(shí)當(dāng)響應(yīng)到來是應(yīng)該在頁面中調(diào)用的函數(shù)，名字一般在請(qǐng)求中指定。

何為跨域？

一般情況下，XMLHttpRequest（XHR）對(duì)象只能訪問與包含它的頁面位于同一個(gè)域中的資源，這種安全策略可以預(yù)防某些惡意行為，即通常所說的同源策略。

只要協(xié)議、域名、端口號(hào)有任何一個(gè)不同，都會(huì)被當(dāng)成不同的域。

下表給出了相對(duì)于 http://store.company.com/dir/... 同源檢測(cè)的結(jié)果：

跨域解決方法

JSONP（JSON with padding）
JSONP由兩部分組成：回調(diào)函數(shù)和數(shù)據(jù)。回調(diào)函數(shù)時(shí)當(dāng)響應(yīng)到來是應(yīng)該在頁面中調(diào)用的函數(shù)，名字一般在請(qǐng)求中指定。而數(shù)據(jù)就是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)。
JSONP通過動(dòng)態(tài)創(chuàng)建
如果Origin指定的源在許可范圍內(nèi)，服務(wù)器返回響應(yīng)的頭信息會(huì)增加如下幾個(gè)字段：
Access-Control-Allow-Origin：必須，表明可以同意哪些跨源請(qǐng)求，設(shè)置為*表明同意任意跨源請(qǐng)求
Access-Control-Allow-Credentials：可選，布爾值，表明服務(wù)器是否允許瀏覽器攜帶用戶憑證相關(guān)信息，例如cookie、http認(rèn)證等信息。CORS請(qǐng)求默認(rèn)不發(fā)送Cookie和HTTP認(rèn)證信息，如果要發(fā)送需要將 withCredentials屬性設(shè)置為true。如果服務(wù)器不返回該字段，即不允許，此時(shí)若瀏覽器發(fā)送了一個(gè)withCredentials屬性為true的請(qǐng)求，則會(huì)被拒絕，在控制臺(tái)報(bào)錯(cuò)。

非簡(jiǎn)單請(qǐng)求：
非簡(jiǎn)單請(qǐng)求的CORS請(qǐng)求，會(huì)在正式通信之前，增加一次HTTP查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求（preflight），詢問當(dāng)前網(wǎng)頁所在的域名是否在服務(wù)器的許可名單之中，以及可以使用那些http方法及頭信息字段。只有得到肯定的答復(fù)，瀏覽器才會(huì)正式發(fā)出XMLHTTPRequest請(qǐng)求。
預(yù)檢請(qǐng)求使用的http方法是Options，表示這是個(gè)用來詢問的請(qǐng)求。 http請(qǐng)求頭中除了包含簡(jiǎn)單請(qǐng)求頭中的origin字段，還包含幾個(gè)特殊字段：
Access-Control-Request-Method：表明請(qǐng)求使用的HTTP方法
Access-Control-Request-Headers：用于在預(yù)先請(qǐng)求時(shí)，告知服務(wù)器要發(fā)起的跨域請(qǐng)求中會(huì)攜帶的請(qǐng)求頭信息，是一個(gè)以逗號(hào)分隔的字符串
如果服務(wù)器確認(rèn)允許跨源請(qǐng)求，則可以做出回應(yīng)。
預(yù)檢請(qǐng)求的回應(yīng)除了簡(jiǎn)單請(qǐng)求的回應(yīng)中的Access-Control-Allow-Origin字段外，還有幾個(gè)特殊字段：
Access-Control-Allow-Methods：表明服務(wù)器支持的所有跨域請(qǐng)求的方法，返回所有可以避免多次預(yù)檢請(qǐng)求
Access-Control-Allow-Headers：表明跨域資源可以攜帶的自定義表頭列表
Access-Control-Max-Age：表明瀏覽器可以將相應(yīng)結(jié)果進(jìn)行緩存的時(shí)間（單位為秒），在緩存時(shí)間內(nèi)可以不用重復(fù)發(fā)送預(yù)檢請(qǐng)求

如果服務(wù)器否定了預(yù)檢請(qǐng)求，會(huì)返回一個(gè)正常的HTTP相應(yīng)，但是沒有任何有關(guān)CORS的頭信息字段。這時(shí)瀏覽器就會(huì)認(rèn)定服務(wù)器不同意預(yù)檢請(qǐng)求，會(huì)觸發(fā)一個(gè)錯(cuò)誤，在控制臺(tái)報(bào)錯(cuò).

只要服務(wù)器通過了預(yù)檢請(qǐng)求，以后每次正常的CORS請(qǐng)求，就跟簡(jiǎn)單請(qǐng)求一樣。
CORS優(yōu)點(diǎn)：1. 相比于JSONP，不僅支持get請(qǐng)求，也支持post、put等請(qǐng)求。
CORS缺點(diǎn)： 1. 不是所有的瀏覽器都支持 2. 需要服務(wù)器支持

CORS瀏覽器兼容情況：

WebSocket
WebSocket 是 HTML5 開始提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工雙向通訊的協(xié)議，同源策略對(duì) Web Sockets 不適用，因此可以實(shí)現(xiàn)異步跨域請(qǐng)求。
為了建立一個(gè) WebSocket 連接，客戶端瀏覽器首先要向服務(wù)器發(fā)起一個(gè) HTTP 請(qǐng)求，這個(gè)請(qǐng)求和通常的 HTTP 請(qǐng)求不同，包含了一些附加頭信息，其中附加頭信息"Upgrade: WebSocket"表明這是一個(gè)申請(qǐng)協(xié)議升級(jí)的 HTTP 請(qǐng)求，服務(wù)器端解析這些附加的頭信息然后產(chǎn)生應(yīng)答信息返回給客戶端，客戶端和服務(wù)器端的 WebSocket 連接就建立起來了，雙方就可以通過這個(gè)連接通道自由的傳遞信息，并且這個(gè)連接會(huì)持續(xù)存在直到客戶端或者服務(wù)器端的某一方主動(dòng)的關(guān)閉連接。
客戶端在收到服務(wù)器響應(yīng)后，建立的連接會(huì)從 HTTP 協(xié)議交換為 Web Socket 協(xié)議。標(biāo)準(zhǔn)的 HTTP 無法實(shí)現(xiàn) Web Sockets，只有支持這種協(xié)議的專門服務(wù)器才能正常工作。 http:// => ws://、https:// => wss://使用自定義協(xié)議的好處是在服務(wù)器和客戶端之間發(fā)送的數(shù)據(jù)量小，不必?fù)?dān)心 HTTP 那樣字節(jié)級(jí)的開銷，比較適合移動(dòng)通信及對(duì)實(shí)時(shí)性要求較高的應(yīng)用。

    // 要?jiǎng)?chuàng)建 Web Socket,需要先實(shí)例一個(gè) WebSocket 對(duì)象并傳入服務(wù)器端的地址，必須為一個(gè)絕對(duì)URL：
    var socket = new WebSocket("ws://echo.websocket.org");
 
    // 當(dāng)瀏覽器和服務(wù)器連接成功后，會(huì)觸發(fā) open 事件
    socket.onopen = function(evevt){
        console.log("open");
    }
    // 當(dāng)服務(wù)器向客戶端發(fā)來消息時(shí)，會(huì)觸發(fā) message 事件
    socket.onmessage = function(event){
    var data = event.data; // 返回的數(shù)據(jù)是字符串
        console.log(data);
    }
    // 當(dāng)瀏覽器收到服務(wù)器發(fā)送的關(guān)閉連接請(qǐng)求時(shí)，就會(huì)觸發(fā) close 事件
    socket.onclose = function(event){
        console.log("close");
    }
    // 如果連接失敗，發(fā)送、接收數(shù)據(jù)失敗或者處理數(shù)據(jù)出現(xiàn)錯(cuò)誤，會(huì)觸發(fā) error 事件
    socket.onerror = function(event){
        console.log("error");
    }
    // 使用send方法像服務(wù)器發(fā)送數(shù)據(jù)(只能發(fā)送純文本數(shù)據(jù)，復(fù)雜的數(shù)據(jù)結(jié)構(gòu)需要JSON.stringify一下)：
    socket.send("Hello World");

注：WebSocket對(duì)象不支持DOM2級(jí)事件偵聽器，必須使用DOM0級(jí)事件語法。

**WebSocket缺點(diǎn)：** 1. 不是所有的服務(wù)器都支持  2. 必須有相應(yīng)的服務(wù)器支持。
**WebSocket優(yōu)點(diǎn)：**1. 支持實(shí)時(shí)通信，可以避免瀏覽器的短輪詢及服務(wù)器的長輪詢。 2. 長連接會(huì)帶來一定的服務(wù)器內(nèi)存開銷

WebSocket瀏覽器兼容情況：

參考文檔

《javascript 高級(jí)程序設(shè)計(jì)》第21章跨源資源共享

阮一峰：跨域資源共享CORS詳解

CORS測(cè)試網(wǎng)站：http://test-cors.org