JSONP CORS WebSocket

honhon 發布于2019-08-21 17:34 / 1992人閱讀

摘要：下表給出了相對于同源檢測的結果跨域解決方法由兩部分組成回調函數和數據。回調函數時當響應到來是應該在頁面中調用的函數，名字一般在請求中指定。

何為跨域？

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

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

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

跨域解決方法

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

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

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

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

CORS瀏覽器兼容情況：

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

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

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

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

WebSocket瀏覽器兼容情況：

參考文檔

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

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

CORS測試網站：http://test-cors.org

GPU云服務器云服務器 CORS 服務器 cors cors 登陸服務器 flask-cors

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89691.html

JS跨域

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

whataa 2019-08-22 15:25 評論0 收藏0
瀏覽器同源政策以及JS跨域

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

zeyu 2019-08-20 18:16 評論0 收藏0
淺談前端跨域

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

dunizb 2019-08-26 13:55 評論0 收藏0
關于跨域的總結

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

lunaticf 2019-08-22 18:47 評論0 收藏0
瀏覽器同源策略，及跨域解決方案

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

scq000 2019-08-23 12:08 評論0 收藏0