跨域ajax請求如何髮齣帶 cookie 的 post 請求

2016-09-06 09:34:00
hainuo
原創 2910
摘要:ajax 中請求數據髮齣帶 cookie 的 post 請求
關於跨域 ajax 請求,大傢基本都已經熟知瞭需要在服務器端做一定的設置,但是客戶端也要做某些特殊設置纔會讓事情更加美妙。## 0x01 服務端設置 這裡説的服務端設置的服務端是跨域請求的目標端。```phpheader("Access-Control-Allow-Origin: http://www.xxx.com");header('Access-Control-Allow-Methods: POST, GET, OPTIONS');header('Access-Control-Allow-Credentials: true');```這三句 如何解釋呢?1. `Access-Control-Allow-Origin` 是説對哪一箇源有效,就是説請求髮齣的網址,比如我們當前訪問頁麵的域名是`www.xxx.com` ,要想對目標服務器 `www.a.com` 進行跨域訪問,那麽目標服務器 `www.a.com` 的返迴 header 中必鬚要包括這箇`Access-Control-Allow-Origin` 而且他的值包含`www.xxx.com`2. `Access-Control-Allow-Methods` 是説目標服務器允許哪些類型請求。`POST`,`GET`,`DELETE`,`PUT`等都是請求,如果隻限製`POST`,那麽可以使用這箇設置來限製請求類型。3. `Access-Control-Allow-Credentials` 這箇是一箇驗證信息,憑證,大傢都知道 `session` 要在客戶端寫入 `cookie` 纔會起作用,所以我們可以比較輕鬆的完成信息衕步。這箇值爲 `true` 時,對 `cookie` 信息進行讀取,這箇值爲`false`時 丟棄所有的 `cookie` 信息## 0x02 客戶端設置這裡説的客戶端是跨域請求的髮起端。```javascript$.ajax({ url: 'http://xxx.com/xx/purchase', data: currentData, type: 'POST', dataType: 'json',xhrFields: { withCredentials: true },crossDomain: true, }).done(callback)```這裡麵需要講的不多,但是針對本博文的重點就是跨域1. 如何跨域,在 `ajax` 請求中聲明是跨域的 `crossDomain:true` 就是這一設置2. 如何髮送 `cookie` ,這時候這箇設置 `xhrFields: { withCredentials: true }` 就起作用瞭##0x03 總結跨域變得越來越容易,也越來越多的被大傢用到,我們在跨域時做好以上兩點,那麽安全性高的瀏覽器將不再攔截我們的請求。ps:在新的 `es6+` 中已經新增瞭 `fetch` 方法讓髮起 `ajax` 請求變得越來越簡單,有興趣的可以關註,當然 `fetch` 無法設置限時也是一箇失敗,但是相信在`es2017`中會完美解決這些美中不足的小問題。
發錶評論
捌 乘 陸 =
評論通過審核後顯示。