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

2016-09-06 09:34:00
hainuo
原創 3006
摘要:ajax 中請求數據髮齣帶 cookie 的 post 請求
關於跨域 ajax 請求,大傢基本都已經熟知瞭 需要在服務器端做一定的設置,但是客戶端也要做某些特殊設置纔會讓事情更加美妙。 ## 0x01 服務端設置 這裡説的服務端設置的服務端是跨域請求的目標端。 ```php header("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`中會完美解決這些美中不足的小問題。
發錶評論
拾 減 玖 =
評論通過審核後顯示。