Angularjs之如何在跨域請求中傳輸Cookie的方法
一般情況我們在使用WebApi之類的技術(shù)時,都會遇到跨域的問題,這個只需要在服務(wù)端做一下處理即可。
如果這些GET或POST請求不需要傳遞Cookie數(shù)據(jù)的話,就沒什么問題了,但如果需要,那么會發(fā)現(xiàn) 雖然已經(jīng)處理了跨域請求的問題,但后臺始終無法獲取到Cookie。
跨域傳輸Cookie是需要后臺和前臺同時做相關(guān)處理才能解決的。
就好比一個握手會話,前臺先表示,我的跨域請求是帶有Cookie的;請求到了服務(wù)端,服務(wù)端表示可以接收跨域Cookie,成交(開始重新帶著Cookie發(fā)起請求)
后臺代碼
Response.Headers.Add("Access-Control-Allow-Credentials", "true");
前臺代碼
$http.post("http://a.domain.com/Api/Product", { productId: 3 }, { withCredentials: true, params: { name: "Ray" }, headers: {'Authorization':"這個不重要"} }).success(function (data) { //TODO });
這個是在單獨的請求中設(shè)置,如果要在所有的請求中都應(yīng)用該設(shè)置則要使用 $httpProvider
angular.module("app").config(function ($httpProvider) { $httpProvider.defaults.withCredentials = true; $httpProvider.defaults.headers.common['Authorization'] = "89757"; })
如果使用jQuery,則是這樣子的
$.ajax({ type: "POST", url: "http://a.domain.com/Api/Product", xhrFields: { withCredentials: true }, success: function (data) { console.log(data) }, error: function (data) { console.error(data) } })
撇開Cookie跨域傳輸?shù)膯栴},angularjs的跨域POST請求與jQuery有些區(qū)別:
jQuery跨域與本域的區(qū)別僅僅是請求頭信息的變化;
angularjs跨域后,會變成兩次請求,第一次的Request Method是OPTIONS,這里有個概念叫preflight,這里不談。
第一次請求到服務(wù)器后,會針對請求的下面三項進行賦值
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers"
瀏覽器接收到返回信息后,會再次發(fā)送請求,這次的Request Method是POST,這回就跟普通本域請求一樣了。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
ui-router中使用ocLazyLoad和resolve的具體方法
這篇文章主要介紹了ui-router中使用ocLazyLoad和resolve的具體方法,詳細(xì)的介紹了ocLazyLoad和resolve的具體用法,非常具有實用價值,需要的朋友可以參考下2017-10-10詳解angularjs 關(guān)于ui-router分層使用
本篇文章主要介紹了詳解angularjs 關(guān)于ui-router分層使用,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機制的相關(guān)資料,非常不錯,具有參考借鑒價值,需要的朋友可以參考下2016-06-06詳解angularjs結(jié)合pagination插件實現(xiàn)分頁功能
本篇文章主要介紹了詳解angularjs結(jié)合pagination插件實現(xiàn)分頁功能,具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-02-02Webpack 實現(xiàn) AngularJS 的延遲加載
這篇文章主要介紹了Webpack 實現(xiàn) AngularJS 的延遲加載的相關(guān)資料,需要的朋友可以參考下2016-03-03創(chuàng)建你的第一個AngularJS應(yīng)用的方法
這篇文章主要介紹了創(chuàng)建你的第一個AngularJS應(yīng)用的方法,AngularJS是一個非常具有人氣的JavaScript框架,需要的朋友可以參考下2015-06-06AngularJS中控制器函數(shù)的定義與使用方法示例
這篇文章主要介紹了AngularJS中控制器函數(shù)的定義與使用方法,結(jié)合具體實例形式分析了AngularJS控制器函數(shù)的定義、綁定及相關(guān)使用技巧,需要的朋友可以參考下2017-10-10