Ajax跨域問題

乙個眾所周知的問題，ajax直接請求普通檔案存在跨域無許可權訪問的問題。解決方法有jsonp，flash等等。

我們發現，web頁面上呼叫js檔案時不受是否跨域的影響，凡是擁有"src"這個屬性的標籤都擁有跨域的能力，比如、

、。那就是說如果要跨域訪問資料，就服務端只能把資料放在js格式的檔案裡。恰巧我們知道json可以簡潔的描述複雜資料，而且json還被js原生支援，所以在客戶端幾乎可以隨心所欲的處理這種格式的資料。然後客戶端就可以通過與呼叫指令碼一模一樣的方式，來呼叫跨域伺服器上動態生成的js格式檔案。客戶端在對json檔案呼叫成功之後，也就獲得了自己所需的資料。這就形成了jsonp的基本概念。允許使用者傳遞乙個callback引數給服務端，然後服務端返回資料時會將這個callback引數作為函式名來包裹住json資料，這樣客戶端就可以隨意定製自己的函式來自動處理返回資料了。

jquery支援jsonp的呼叫。在另外的乙個網域名稱中指定好**函式名稱，就可以用下面的形式來就載入json資料。

url?callback=?

jquery.getjson(url + "&callback=?", function(data) );

服務端當然也要提供jsonp的支援，其實只要提供讀寫callback這個params就可以了。

cross-origin resource sharing (cors) 是w3c工作草案，它定義了在跨域訪問資源時瀏覽器和伺服器之間如何通訊。cors背後的基本思想是使用自定義的http頭部允許瀏覽器和伺服器相互了解對方，從而決定請求或響應成功與否。

cors與jsonp相比，更為先進、方便和可靠。

1、 jsonp只能實現get請求，而cors支援所有型別的http請求。

2、使用cors，開發者可以使用普通的xmlhttprequest發起請求和獲得資料，比起jsonp有更好的錯誤處理。

3、 jsonp主要被老的瀏覽器支援，它們往往不支援cors，而絕大多數現代瀏覽器都已經支援了cors。

對乙個簡單的請求，沒有自定義頭部，要麼使用get，要麼使用post，它的主體是text/plain,請求用乙個名叫orgin的額外的頭部傳送。origin頭部包含請求頁面的頭部（協議，網域名稱，埠），這樣伺服器可以很容易的決定它是否應該提供響應。

伺服器端對於cors的支援，主要就是通過設定access-control-allow-origin來進行的。

header set access-control-allow-origin *

為了防止xss攻擊我們的伺服器，我們可以限制域，比如

access-control-allow-origin:

很多服務都已經提供了cors支援，比如 aws 支援跨域資源分享功能cors，向s3上傳不需要**。

利用mvc的filter特性，即可很輕鬆的處理jsonp或者cros跨域支援。首先定義2個filter：

///
///轉換請求為jsonp格式返回資料
///json服務堆疊濾波器屬性（可供網頁端任意呼叫）
/// [attributeusage(attributetargets.class | attributetargets.method, inherited = true, allowmultiple = true
)] 
public
class
corsattribute : actionfilterattribute
}base
.onactionexecuted(filtercontext);}}

在註冊filter的時候，我們將它加入全域性控制器，或者應用在需要轉換的控制器或action上也可以。

ps: 全域性過濾器，先新增的，最後被執行。大家留意下全域性fiter的執行順序。

參考:/cloudcraft/article/details/8986798

Ajax跨域問題

ajax跨域問題

Ajax跨域問題

ajax跨域問題

Ajax跨域問題

ajax跨域問題

Ajax跨域問題

ajax跨域問題

相關推薦