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ù)器后，會針對請求的下面三項進(jìn)行賦值
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers"
瀏覽器接收到返回信息后，會再次發(fā)送請求，這次的Request Method是POST，這回就跟普通本域請求一樣了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
下面小編就為大家?guī)硪黄褂胕onic播放輪詢廣告的實現(xiàn)方法(必看)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04
Angular 利用路由跳轉(zhuǎn)到指定頁面的指定位置方法
今天小編就為大家分享一篇Angular 利用路由跳轉(zhuǎn)到指定頁面的指定位置方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要給大家介紹了Angular.JS通過指令操作DOM的方法，文中給出了詳細(xì)的介紹和示例代碼，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-05-05
Angularjs+bootstrap+table多選（全選）支持單擊行選中實現(xiàn)編輯、刪除功能
這篇文章主要介紹了Angularjs bootstrap table多選（全選）支持單擊行選中實現(xiàn)編輯、刪除功能,需要的朋友可以參考下2017-03-03
詳解angularjs中如何實現(xiàn)控制器和指令之間交互
本篇文章主要介紹了詳解angularjs中如何實現(xiàn)控制器和指令之間交互，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
本篇文章主要介紹了angularjs ui-router中路由的二級嵌套，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-03-03
Angularjs渲染的 using 指令的星級評分系統(tǒng)示例
本篇文章主要介紹了Angularjs渲染的 using 指令的星級評分系統(tǒng)示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
我們將通過示例介紹一種在 Angular 應(yīng)用程序中獲取當(dāng)前日期的簡單方法，我們還將解決如何更改 Angular 中的日期格式，對在Angular中獲取當(dāng)前日期感興趣的朋友跟隨小編一起看看吧2023-05-05
這篇文章主要介紹了Angular路由ui-router配置詳解，非常不錯，具有一定得參考借鑒價值，需要的朋友參考下吧2018-08-08
angular js的雙向數(shù)據(jù)綁定，在開發(fā)中起到的作用灰常大，所以下面這篇文章主要給大家介紹了關(guān)于Angularjs中$apply及優(yōu)化使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考借鑒，下面來一起看看吧2018-07-07