Angularjs怎么在跨域請求中傳輸Cookie

這篇文章給大家分享的是有關(guān)Angularjs怎么在跨域請求中傳輸Cookie的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。

一般情況我們在使用WebApi之類的技術(shù)時(shí)，都會遇到跨域的問題，這個(gè)只需要在服務(wù)端做一下處理即可。

如果這些GET或POST請求不需要傳遞Cookie數(shù)據(jù)的話，就沒什么問題了，但如果需要，那么會發(fā)現(xiàn) 雖然已經(jīng)處理了跨域請求的問題，但后臺始終無法獲取到Cookie。

跨域傳輸Cookie是需要后臺和前臺同時(shí)做相關(guān)處理才能解決的。

就好比一個(gè)握手會話，前臺先表示，我的跨域請求是帶有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':"這個(gè)不重要"}
}).success(function (data) {
  //TODO
});

這個(gè)是在單獨(dú)的請求中設(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，這里有個(gè)概念叫preflight，這里不談。

第一次請求到服務(wù)器后，會針對請求的下面三項(xiàng)進(jìn)行賦值

1. Access-Control-Allow-Origin

2. Access-Control-Allow-Methods

3. Access-Control-Allow-Headers"

瀏覽器接收到返回信息后，會再次發(fā)送請求，這次的Request Method是POST，這回就跟普通本域請求一樣了。

感謝各位的閱讀！關(guān)于“Angularjs怎么在跨域請求中傳輸Cookie”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！