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

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