本文目录一览:
跨域请求如何携带cookie?不小心都拿了Offer
最近在参加面试找工作,陆陆续续的面了两三家。其中面试官问到了一个问题:如何解决跨域问题? 我巴巴拉拉的一顿说,大概了说了四种方法,然后面试官紧接着又问:那跨域请求怎么携带cookie呢?(常规的面试套路,一般都会顺着你的回答往深了问)由于之前的项目都是同源的,不牵涉跨域访问,所以一时没有回答出来,后来研究了下,所以有了这篇文章
阅读本文,你将学到:
思路:
先看下代码结构,相对比较的简单:
A 服务的代码:
index.html 的代码:
B 服务的代码:
首先我们先在 A 服务的 index.html 页面中得到一个 cookie ,运行 A 服务:
然后打开 : 没有问题的话,页面长这样:
这个时候 F12 打开控制台: 可以看到发送了一个 login 请求,并且设置了cookie,也可以选择浏览器控制台的 Application 页签,选中 cookie ,可以看到 cookie 的信息:
然后我们点击页面上的 发送同源请求 按钮,可以看到发送了一个user请求,并且已经携带上了cookie:
接下来刺激的画面来了,我们点击 发送跨域请求 按钮,出现了跨域请求的报错:
重点 : 接下来开始解决跨域携带cookie问题:
什么是withCredentials?
XMLHttpRequest.withCredentials 属性是一个Boolean类型,它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制(cross-site Access-Control)请求。在同一个站点下使用withCredentials属性是无效的。
如果在发送来自其他域的XMLHttpRequest请求之前,未设置withCredentials 为true,那么就不能为它自己的域设置cookie值。而通过设置withCredentials 为true获得的第三方cookies,将会依旧享受同源策略,因此不能被通过document.cookie或者从头部相应请求的脚本等访问。
这个时候再去发送一个跨域请求,你会发现依旧报错,但是我们仔细看下报错,意思是需要设置header的 Access-Control-Allow-Origin 属性:
我们修改 B (app2.js)服务的代码:
修改完之后再次发送一个跨域请求,你会发现,又报错了(接近崩溃),但是跟之前报的错不一样了,意思大概就是 Access-Control-Allow-Credentials 这个属性应该设置为 true ,但是显示得到的是个 '' :
再次修改B服务的代码(每次修改后需要重新运行):
再发送一个跨域请求:
可以看到,这个跨域请求已经请求成功并且返回数据了!而且也携带了A服务的cookie,这个时候已经大功告成了。
js控制cookie跨域
例:a.b.com和c.b.com两个站,建立方式如下: a.b.com站下建a.html。关键代码如下: script type="text/javascript" function setCookie(c_name,value,expiredays) { var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); alert(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+((expiredays==null) ? "" : ";expires="+exdate.toGMTString())+";path=/;domain=b.com"; } window.onload=function(){ setCookie("listallwjh","sfwjh"); alert("Cookie设置成功!"); } /script c.b.com站下建a.html。关键代码如下 script function getCookie(c_name) { if (document.cookie.length0) { c_start=document.cookie.indexOf(c_name + "="); if (c_start!=-1) { c_start=c_start + c_name.length+1 ; c_end=document.cookie.indexOf(";",c_start); if (c_end==-1) c_end=document.cookie.length; return unescape(document.cookie.substring(c_start,c_end)); } } return ""; } window.onload=function(){ var c_name="listallwjh"; if(getCookie("listallwjh")!=null){ alert(getCookie("listallwjh")); } } /script 这两个一个也面是设置,一个是取,只要保证两个规则一样,就行。运行,结果:OK! 注:这两个方法有时候也可以写在一起,先判断cookie是否存在,在创建
如何用js实现跨域获取cookie
正常情况下,浏览器禁止跨域获取cookie
一般通过sso服务可以实现取得跨域cookie,思路如下:
域A页面访问位于域A的服务器,对权限进行验证
域A服务器于域B服务器通信,记录一个唯一的加密串用作身份验证域(并将cookie信息发送给域B服务器)
域A服务器返回302跳转,跳转到域B下,并将加密串作为url的一部分
页面由域A跳转到域B,域B服务器通过加密串获取到事先从域A服务器上得到的cookie信息,并在响应头中添加set-cookie字段设置cookie
php js跨域请求,并设置cookies
首先要说的是,阁下的问题看起颇费神,中文英文符号混杂,大小写混杂,让阅读者看起相当吃力。
其次,你跨域,JS不能使用POST和GET请求的,这是浏览器安全规则,不过可以使用其它办法来获得类似结果。
JS跨域,POST可以通过提交隐藏表单至隐藏框架页来得到请求结果。而GET请求则可以在目标地址后面加上要请求的GET参数然后抓取目标页的所有网页内容,再通过正则处理获得结果;也可以使用JSON来获取(详情请自行学习JSON,很简单的)。
阁下的问题,只是获取COOKIE时间,那么可以直接通过JS抓取目标页或JSON获得。而B域名的cookies.php,完全不需要访问index.php来获得上一个COOKIE的时间,因为它们是同一个站,index.php能访问到的COOKIE,cookies.php也能访问到。
B域名的cookies.php参考如下(仅供参考,具体请根据自己情况另行写代码):
if(isset($_COOKIE["user"]))//
$time = $_COOKIE["user"];//
else
$time = 0;//
$_COOKIE["user"] = time();
echo $time;
//或输出JSON,请自行学习
终上,仅是提供一个思路,更多的还是要靠阁下自行摸索学习。
另外,这种跨域请求,建议使用JSON,因为它简单方便。当你学会了,就表示你会写接口和使用接口了(虽然这个只是最简单的接口)。当然除了JSON还可以使用XML,只是性能稍差一些,也不错