成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

JSONP CORS WebSocket

honhon / 1994人閱讀

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

何為跨域？

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

只要協(xié)議、域名、端口號有任何一個不同，都會被當成不同的域。

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

跨域解決方法

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


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


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

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

CORS瀏覽器兼容情況：

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

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

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

WebSocket瀏覽器兼容情況：

參考文檔

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

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/89691.html

相關(guān)文章

  • JS跨域

    摘要：跨域概述兩個不同域互相請求，稱為跨域，是由瀏覽器同源策略限制的一類請求場景。同源策略限制以下幾種行為和無法讀取無法獲得請求不能發(fā)送目前主流的用于解決跨域問題的方法跨域缺點這種方法只適用于和窗口，和無法通過這種方法。 跨域概述 兩個不同域互相請求，稱為跨域，是由瀏覽器同源策略限制的一類請求場景。 --> 同源策略/SOP（Same origin policy）是瀏覽器最核心也最基本的安全...

    whataa 評論0 收藏0

  • 瀏覽器同源政策以及JS跨域

    摘要：瀏覽器同源政策以及跨域同源是指協(xié)議相同域名相同端口相同。同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。該協(xié)議不實行同源政策，只要服務(wù)器支持，就可以通過它進行跨源通信。參考文獻瀏覽器同源政策及其規(guī)避方法詳解跨域問題 瀏覽器同源政策以及JS跨域 同源是指協(xié)議相同、域名相同、端口相同。同源政策的目的，是為了保證用戶信息的安全，防止惡意的網(wǎng)站竊取數(shù)據(jù)。 同源策略主要限制下面...

    zeyu 評論0 收藏0

  • 淺談前端跨域

    摘要：一什么是跨域跨域簡單的理解就是同源策略的限制。同源策略限制的內(nèi)容請求不能正常進行。同源策略默認地址是網(wǎng)頁的本身。 一、什么是跨域？ 跨域簡單的理解就是JavaScript同源策略的限制。是出于安全的考慮，a.com域名下的js不能操作b.com或者c.com域名下的對象。 當協(xié)議、子域名、主域名、端口號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算叫跨域。 一個正常...

    dunizb 評論0 收藏0

  • 關(guān)于跨域的總結(jié)

    摘要：關(guān)于跨域，個人總結(jié)了以下幾種方法其中等方法常用，的方法既不復雜，也能兼容到幾乎所有瀏覽器，這真是極好的一種跨域方法。這個主要針對跨域訪問的情況兩個網(wǎng)頁一級域名相同，只是二級域名不同，瀏覽器允許通過設(shè)置共享。 關(guān)于跨域，個人總結(jié)了以下幾種方法 JSONP CORS WebSocket document.domain window.name location.hash postMessa...

    lunaticf 評論0 收藏0

  • 瀏覽器同源策略，及跨域解決方案

    摘要：三哪些會受到同源策略限制對于瀏覽器來說，除了會受到同源策略的限制外，瀏覽器加載的一些第三方插件也有各自的同源策略。九的現(xiàn)代瀏覽器允許腳本直連一個地址而不管同源策略。 一、Origin（源） 源由下面三個部分組成： 域名 端口 協(xié)議 兩個 URL ，只有這三個都相同的情況下，才可以稱為同源。 下來就以 http://www.example.com/page.html 這個鏈接來比較說...

    scq000 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<