歡迎光臨
每天分享高質量文章

淺談跨域以WebService對跨域的支持

跨域問題來源於JavaScript的同源策略,即只有 協議+主機名+端口號 (如存在)相同,則允許相互訪問。也就是說JavaScript只能訪問和操作自己域下的資源,不能訪問和操作其他域下的資源。

在以前,前端和後端混雜在一起, 比如JavaScript直接呼叫同系統裡面的一個Httphandler,就不存在跨域的問題,但是隨著現代的這種多種客戶端的流行,比如一個應用通常會有Web端,App端,以及WebApp端,各種客戶端通常會使用同一套的後臺處理邏輯,即API, 前後端分離的開發策略流行起來,前端只關註展現,通常使用JavaScript,後端處理邏輯和資料通常使用WebService來提供json資料。一般的前端頁面和後端的WebService API通常部署在不同的服務器或者域名上。這樣,通過ajax請求WebService的時候,就會出現同源策略的問題。

需要說明的是,同源策略是JavaScript裡面的限制,其他的編程語言,比如在C#,Java或者iOS等其他語言中是可以呼叫外部的WebService,也就是說,如果開發Native應用,是不存在這個問題的,但是如果開發Web或者Html5如WebApp,通常使用JavaScript ajax對WebService發起請求然後解析傳回的值,這樣就可能存在跨域的問題。

一般的,很容易想到,將外部的資源搬到同一個域上就能解決同源策略的限制的。即在Web網站上同時開發一個Http服務端頁面,所有JavaScript的請求都發到這個頁面上來,這個頁面在內部使用其他語言去呼叫外部的WebService。即添加一個代理層。這種方式可以解決問題,但是不夠直接和高效。

目前,比較常見的跨域解決方案包括JSONP (JSON with padding)和CORS (Cross-origin resource sharing )。一些解決方案需要客戶端和服務端配合如JSOP,一些則只需要服務端配合處理比如CORS。下麵分別介紹這兩種跨域方案,以及服務端WebService如何支持這兩種跨域方案。

JSONP以及WebService的支持

同源策略下,某個服務器是無法獲取到服務器以外的資料,但是html裡面的img,iframe和script等標簽是個例外,這些標簽可以通過src屬性請求到其他服務器上的資料。而JSONP就是通過script節點src呼叫跨域的請求。

當我們向服務器提交一個JSONP的請求時,我們給服務傳了一個特殊的引數,告訴服務端要對結果特殊處理一下。這樣服務端傳回的資料就會進行一點包裝,客戶端就可以處理。

舉個例子,服務端和客戶端約定要傳一個名為callback的引數來使用JSONP功能。比如請求的引數如下:

http://www.example.net/sample.aspx?callback=mycallback

如果沒有後面的callback引數,即不使用JSONP的樣式,該服務的傳回結果可能是一個單純的json字串,比如:

{ foo : ‘bar’ }

如果和服務端約定jsonp格式,那麼服務端就會處理callback的引數,將傳回結果進行一下處理,比如處理成:

mycallback({ foo : ‘bar’ })

可以看到,這其實是一個函式呼叫,比如可以實現在頁面定義一個名為mycallback的回呼函式:

mycallback = function(data)

{

alert(data.foo);

};

現在,請求的傳回值回去觸發回呼函式,這樣就完了了跨域請求。

如果使用ServiceStack創建WebService的話,支持Jsonp方式的呼叫很簡單,只需要在AppHost的Configure函式裡面註冊一下對響應結果進行過濾處理即可。

///

/// Application specific configuration

/// This method should initialize any IoC resources utilized by your web service classes.

///

///

public override void Configure(Container container)

{

ResponseFilters.Add((req, res, dto) =>

{

var func = req.QueryString.Get(“callback”);

if (!func.isNullOrEmpty())

{

res.AddHeader(“Content-Type”, ContentType.Html);

res.Write(“

.FormatWith(func, dto.ToJson()));

res.Close();

}

});

}

JSONP跨域方式比較方便,也支持各種較老的瀏覽器,但是缺點很明顯,他只支持GET的方式提交,不支持其他Post的提交,Get方式對請求的引數長度有限制,在有些情況下可能不滿足要求。所以下麵就介紹一下CORS的跨域解決方案。

CORS跨域及WebService的支持

先來看一個例子,我們新建一個基本的html頁面,在裡面編寫一個簡單的是否支持跨域的小腳本,如下:

AJAX跨域請求測試


赞(0)

分享創造快樂