ajax跨域请求及cookie和session的处理

今天写一个用户注册的脚本，涉及跨域操作以及cookie和session的处理，在这里记录下。

假设我们从www.sina.com.cn跨域请求www.baidu.com。

首先是ajax跨域的问题，这个比较简单，网上很多教程，基本上在nginx配置里或php程序里加入返回头部指令都可以。当你的浏览器返回类似下面的错误信息时，基本就可以肯定是跨域的问题啦：

XMLHttpRequest cannot load http://www.baidu.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://www.sina.com.cn’ is therefore not allowed access.

在nginx配置文件里加入下面的指令即可解决，也可以在php程序里增加同功能的代码（请上网自行查找）：

add_header Access-Control-Allow-Origin ‘http://www.sina.com.cn’;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Headers “x-requested-with,Authorization”;
add_header Access-Control-Allow-Methods *;

跨域的问题解决后又发现，后台程序无论如何无法获得保存验证码随机字符的session，上网一查果然还是ajax跨域请求的问题，ajax在发送跨域的请求时，为了安全，是不会携带认证信息的，也就是不会将本地的cookie发送到后台的，cookie中存有sessionId，这样一来，请求发送到后台之后，无法通过request来获取 session的信息。所以，在ajax发送跨域请求的时候，添加配置，让请求带上cookie信息发送到后台。我修改后的部分js代码如下，关键就是带上withCredentials参数：

$.ajax({
    type: "GET",
    url: "http://www.baidu.com",
    data: {},
    dataType: "json",
    xhrFields: {withCredentials: true},
    success: function(json){
        if(!json){
            alert('验证码验证失败，请重试');
            return false;
        }
            
        if(json.state == 'fail'){
            alert(json.message);
            return false;
        }
    },
    error: function(){
        alert('请求失败，请重试');
        return false;
    }
});

本文为原创文章，转载请注明出处！

打赏作者