概念

什麼是同源策略:
同源策略,它是由Netscape提出的一個著名的安全策略。
現在所有支持JavaScript 的瀏覽器都會使用這個策略。
所謂同源是指,域名,協議,端口相同。
當一個瀏覽器的兩個tab頁中分別打開來 百度和谷歌的頁面
當瀏覽器的百度tab頁執行一個腳本的時候會檢查這個腳本是屬於哪個頁面的,
即檢查是否同源,只有和百度同源的腳本纔會被執行。 [1]
如果非同源,那麼在請求數據時,瀏覽器會在控制檯中報一個異常,提示拒絕訪問。
同源策略是瀏覽器的行爲,是爲了保護本地數據不被JavaScript代碼獲取回來的數據污染,因此攔截的是客戶端發出的請求回來的數據接收,即請求發送了,服務器響應了,但是無法被瀏覽器接收。

如果Web世界沒有同源策略,當你登錄FreeBuf賬號並打開另一個站點時,這個站點上的JavaScript可以跨域讀取你的FreeBuf賬號數據,這樣整個Web世界就無隱私可言了。

什麼是cors策略:
CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。
它允許瀏覽器向跨源服務器,發出ajax請求,從而克服了AJAX只能同源使用的限制。
CORS依賴於服務器端的設定,只要在服務器端進行了設置,就可以實現相應的資源訪問。

什麼是應用程序域:
使用.NET建立的可執行程序 .exe,並沒有直接承載到進程當中,而是承載到應用程序域(AppDomain)當中。應用程序域是.NET引入的一個新概念,它比進程所佔用的資源要少,可以被看作是一個輕量級的進程。
在一個進程中可以包含多個應用程序域,一個應用程序域可以裝載一個可執行程序(
.exe)或者多個程序集(*.dll)。這樣可以使應用程序域之間實現深度隔離,即使進程中的某個應用程序域出現錯誤,也不會影響其他應用程序域的正常運作。

應用程序域有助於將在一個應用程序中創建的對象與在其他應用程序中創建的對象隔離,以使運行時行爲可以預知。在一個單獨的進程中可以存在多個應用程序域。

應用程序域(AppDomain):
在操作系統中,程序和程序之間應實現某種形式的隔離,防止程序和程序之間產生不可預知的影響,這種隔離是必須的。在DotNet技術之前,通常採用進程來形成隔離邊界。每一個應用程序被加載到單獨的進程中,每個進程都有其私有的內存,運行在一個進程中的應用程序不能寫入另一個應用程序的內存,您也不能在兩個進程間進行直接調用。
在.NET結構中,應用程序有一個新的邊界:應用程序域。應用程序域是一個用於隔離應用程序的“輕量級分界線”。所謂的“輕量級”是因爲多個應用程序域可以存在於單個操作系統進程中。
應用程序域可以確保在一個域中運行的代碼不會影響進程中的其他應用程序;能夠在不停止整個進程的情況下停止單個應用程序。

什麼是程序集:
一個程序集可以是一個包括元數據的DLL或EXE,也可以由多個文件組成,例如資源文件、元數據、DLL和EXE。
注意:Win32的DLL(動態鏈接庫)和DotNet中的DLL(程序集文件)的擴展名雖然都是DLL,但是二者內部的數據組織是不一樣的,所以千萬不要把二者混爲一談。

====================================================================
如下例子:
事實上,在我進行驗證的時候就遇到了跨域的問題,因爲本地運行的頁面和本地運行的服務器之間,不符合同源的策略,是不能進行通信的,我當時採用的解決方案就是通過CORS方法在服務器端添加了Access-Control-Allow-字段實現了跨域通信。

服務端

var http = require('http');

http.createServer(function (request, response) {

    // 發送 HTTP 頭部
    // HTTP 狀態值: 200 : OK
    // 內容類型: text/plain
    //response.writeHead(200, {'Content-Type': 'text/plain'});
    //Access-Control-Allow-Origin *代表任何域名都可以訪問這個服務.用作匹配同源策略
    response.writeHead(200,{'content-Type':'text/plain',"Access-Control-Allow-Origin":"*"});

    // 發送響應數據 "Hello World"
    response.end('Hello World\n');
}).listen(8181);

// 終端打印如下信息
console.log('Server running at http://127.0.0.1:8181/');

如果沒有 Access-Control-Allow-Origin 則會報錯
Access to XMLHttpRequest at ‘http://127.0.0.1:8181/’ from origin ‘http://localhost:7456’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

在“http://127.0.0.1:8181/”從源節點“http://localhost:7456”訪問XMLHttpRequest已被CORS策略阻塞:請求的資源上不存在“Access- control - allow - origin”頭文件。

客戶端
手機端http訪問實現
使用Cocos Creator新建一個項目,組織目錄結構,示例如下:
在這裏插入圖片描述
Cocos Creator支持Web平臺上最廣泛使用的標準網絡接口:

XMLHttpRequest:用於短連接
WebSocket:用於長連接
我們使用XMLHttpRequest實現手機端的http服務請求,在http.js文件中寫下如下代碼:

module.exports = {
    request: function(obj) {
        var httpRequest = new XMLHttpRequest();
        var time = 5*1000;
        var timeout = false;

        // 超時設置
        var timer = setTimeout(function(){
            timeout = true;
            httpRequest.abort();
        }, time);

        var url = obj.url;

        // 組織請求參數
        if (typeof obj.data == 'object') {
            console.info('obj.data=' + JSON.stringify(obj.data));
            var kvs = []
            for (var k in obj.data) {
               kvs.push(encodeURIComponent(k) + '=' + encodeURIComponent(obj.data[k]));
            }
            url += '?';
            url += kvs.join('&');
        }

        httpRequest.open(obj.method?obj.method:'GET', url, true);
        
        httpRequest.onreadystatechange = function () {
            var response = httpRequest.responseText;
            console.info('http url cb:' +  url + ' readyState:' + httpRequest.readyState + ' status:' + httpRequest.status);
            clearTimeout(timer);

            if (httpRequest.readyState == 4) {
                console.info('http success:' + url + ' resp:' + response);
                if (typeof obj.success == 'function') {
                    obj.success(response);
                }
            } else {
                console.info('http fail:' + url);
                if (typeof obj.fail == 'function') {
                    obj.fail(response);
                }
            }
        };
        httpRequest.send();
    }
}

參數說明:obj爲一個JSON結構體,需要包含url鍵,data做爲可選鍵,data的值需要爲一個字典。

http請求接口的調用
在HelloWorld.js文件首行添加:
var http = require(‘http’);
實現如下函數:

httpRequest: function() {
    var obj = {
        'url' : 'http://127.0.0.1:8181/'
    }
    http.request(obj);
}

在onLoad中調用函數:
this.httpRequest();
此時可以看到控制檯中的輸出:
在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章