Angularjs之如何在跨域請(qǐng)求中傳輸Cookie的方法
一般情況我們?cè)谑褂肳ebApi之類的技術(shù)時(shí),都會(huì)遇到跨域的問題,這個(gè)只需要在服務(wù)端做一下處理即可。
如果這些GET或POST請(qǐng)求不需要傳遞Cookie數(shù)據(jù)的話,就沒什么問題了,但如果需要,那么會(huì)發(fā)現(xiàn) 雖然已經(jīng)處理了跨域請(qǐng)求的問題,但后臺(tái)始終無(wú)法獲取到Cookie。
跨域傳輸Cookie是需要后臺(tái)和前臺(tái)同時(shí)做相關(guān)處理才能解決的。
就好比一個(gè)握手會(huì)話,前臺(tái)先表示,我的跨域請(qǐng)求是帶有Cookie的;請(qǐng)求到了服務(wù)端,服務(wù)端表示可以接收跨域Cookie,成交(開始重新帶著Cookie發(fā)起請(qǐng)求)
后臺(tái)代碼
Response.Headers.Add("Access-Control-Allow-Credentials", "true");
前臺(tái)代碼
$http.post("http://a.domain.com/Api/Product", { productId: 3 }, { withCredentials: true, params: { name: "Ray" }, headers: {'Authorization':"這個(gè)不重要"} }).success(function (data) { //TODO });
這個(gè)是在單獨(dú)的請(qǐng)求中設(shè)置,如果要在所有的請(qǐng)求中都應(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請(qǐng)求與jQuery有些區(qū)別:
jQuery跨域與本域的區(qū)別僅僅是請(qǐng)求頭信息的變化;
angularjs跨域后,會(huì)變成兩次請(qǐng)求,第一次的Request Method是OPTIONS,這里有個(gè)概念叫preflight,這里不談。
第一次請(qǐng)求到服務(wù)器后,會(huì)針對(duì)請(qǐng)求的下面三項(xiàng)進(jìn)行賦值
- Access-Control-Allow-Origin
- Access-Control-Allow-Methods
- Access-Control-Allow-Headers"
瀏覽器接收到返回信息后,會(huì)再次發(fā)送請(qǐng)求,這次的Request Method是POST,這回就跟普通本域請(qǐng)求一樣了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- PHP實(shí)現(xiàn)cookie跨域session共享的方法分析
- 解決前后端分離 vue+springboot 跨域 session+cookie失效問題
- 基于axios 解決跨域cookie丟失的問題
- 利用nginx解決cookie跨域訪問的方法
- axios中cookie跨域及相關(guān)配置示例詳解
- ASP.Net WebAPI與Ajax進(jìn)行跨域數(shù)據(jù)交互時(shí)Cookies數(shù)據(jù)的傳遞
- Ajax跨域請(qǐng)求COOKIE無(wú)法帶上的完美解決辦法
- Ajax跨域訪問Cookie丟失問題的解決方法
- php跨域cookie共享使用方法
- Cookie跨域問題解決方案代碼示例
相關(guān)文章
ui-router中使用ocLazyLoad和resolve的具體方法
這篇文章主要介紹了ui-router中使用ocLazyLoad和resolve的具體方法,詳細(xì)的介紹了ocLazyLoad和resolve的具體用法,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-10-10angularjs實(shí)現(xiàn)首頁(yè)輪播圖效果
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)首頁(yè)輪播圖效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04詳解angularjs 關(guān)于ui-router分層使用
本篇文章主要介紹了詳解angularjs 關(guān)于ui-router分層使用,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制
這篇文章主要介紹了Angular的Bootstrap(引導(dǎo))和Compiler(編譯)機(jī)制的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06詳解angularjs結(jié)合pagination插件實(shí)現(xiàn)分頁(yè)功能
本篇文章主要介紹了詳解angularjs結(jié)合pagination插件實(shí)現(xiàn)分頁(yè)功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。2017-02-02實(shí)踐中學(xué)習(xí)AngularJS表單
表單是最常用的一種組建。在Angular.js中,其實(shí)并沒有單獨(dú)的為表單添加多少特殊功能。但是,利用Angular.js框架本身的特點(diǎn),可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實(shí)現(xiàn)的2016-03-03Webpack 實(shí)現(xiàn) AngularJS 的延遲加載
這篇文章主要介紹了Webpack 實(shí)現(xiàn) AngularJS 的延遲加載的相關(guān)資料,需要的朋友可以參考下2016-03-03angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼
本篇文章主要介紹了angular實(shí)現(xiàn)form驗(yàn)證實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下。2017-01-01創(chuàng)建你的第一個(gè)AngularJS應(yīng)用的方法
這篇文章主要介紹了創(chuàng)建你的第一個(gè)AngularJS應(yīng)用的方法,AngularJS是一個(gè)非常具有人氣的JavaScript框架,需要的朋友可以參考下2015-06-06AngularJS中控制器函數(shù)的定義與使用方法示例
這篇文章主要介紹了AngularJS中控制器函數(shù)的定義與使用方法,結(jié)合具體實(shí)例形式分析了AngularJS控制器函數(shù)的定義、綁定及相關(guān)使用技巧,需要的朋友可以參考下2017-10-10