跨域ajax请求如何发出带 cookie 的 post 请求

2016-09-06 09:34:00
hainuo
原创 3018
摘要: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`中会完美解决这些美中不足的小问题。
发表评论
贰 减 柒 =
评论通过审核后显示。