迹忆博客
当前位置: 主页 > 学无止境 > 网络 > 文章

Ajax跨域Cookie相关设置

发布时间: 2016-05-25 作者: 迹忆 浏览次数:

在Web编程中我们经常会遇到跨域的问题。默认情况下,浏览器是不允许跨域访问的。所以说,在这里就有一个概念:CORS(Cross-Origin Resource Sharing)跨域资源共享。

在HTML5标准出来之前,CORS是不被允许的。但是为了达到跨域访问资源的目的,出现了很多较麻烦的方式:jsonp、代理文件、地址栏hash等等。随着HTML5的出现,CORS为我们解决了一个大麻烦。

CORS的用途比较广泛,最近在做SSO的时候同样也用到了CORS。对于CORS的详细介绍我们大家可以参考阮一峰老师的《跨域资源共享CORS详解》这篇文章。在这里我们只介绍以下两种情况。

ajax跨域简单访问

要想实现跨域访问,首先我们要清楚CORS实现跨域访问最重要的一点就是设置Access-Control-Allow-Origin这个参数。

假如我有两个站点

www.onmpw.com
www.jiyibk.com

我在onmpw站点上通过ajax访问jiyibk。

$.ajax({
         url:'http://www.jiyibk.com/index.php',
         dataType:'json',
         type:'post',
         data:{id:1},
         success:function(data){
                   console.log(data);
         },
         error:function(err){
                   console.log(err);
         }
})

如果我们不做任何设置,就会出现禁止跨域访问的提示

禁止跨域错误信息

那要解决这个问题,我们需要用到http请求头中的Origin参数。

Ajax跨域Cookie相关设置

Origin这个参数代表的是来源站点。因此我们只需要在jiyibk服务端对Access-Control-Allow-Origin进行设置,其允许的网站就是请求头中的Origin选项值。

<?php
         header("Access-Control-Allow-Origin:".$_SERVER[‘HTTP_ORIGIN’]);

只需要设置服务端即可,在客户端不用进行其他的设置就可以实现跨域访问了。不过,上面的设置仅仅是可以跨域访问,对于cookie还是不能跨域设置和读取。接下来我们就来进行cookie跨域的设置。

ajax跨域cookie设置

上面我们已经实现了ajax跨域访问了,但是还是不能进行cookie的设置。要想实现跨域cookie的设置,我们还需要对CORS的另一个重要的参数Access-Control-Allow-Credentials进行设置。

和上面的设置不同的是,此项不仅仅是在服务端设置,还需要再客户端也进行设置。

客户端如下:

$.ajax({
         url:'http://www.jiyibk.com/index.php',
         xhrFields: {withCredentials: true},
         dataType:'json',
         type:'post',
         data:{id:1},
         success:function(data){
                   console.log(data);
         },
         error:function(err){
                   console.log(err);
         }
})

通过jquery的ajax设置还是比较简单的。只是加上xhrFields: {withCredentials: true},这一项客户端就可以说是设置完成了。

接下来是在jiyibk服务端:

<?php
    header("Access-Control-Allow-Origin:". $_SERVER[‘HTTP_ORIGIN’]);
    header("Access-Control-Allow-Credentials: true ");

经过以上的设置就可以进行cookie跨域设置了。

CORS对于我们开发web应用提供了很大的方便。本文只是简单介绍了ajax跨域设置cookie的问题,对于其他深层次的东西还有待于大家去探索。总之,希望本文能给大家一些帮助。

赞助
迹忆博客

除非注明转载,本站文章均为原创,欢迎转载,转载请以链接形式注明出处

本文地址: