Jquery Ajax Firefox不发送cookie(Chrome工作)

时间:2012-12-01 20:25:56

标签: jquery ajax firefox google-chrome spring-security

我试图在我的应用程序中使用Ajax身份验证,我似乎已经让它工作了,除了firefox似乎没有在" cookie"中向服务器发送正确的jessionid。后续请求的请求标头,而chrome这样做就好了。这是登录功能:

$.ajaxSetup({
    xhrFields: {
        withCredentials : true
    }
})
function sudoLogin(callback){

    $.ajax({
            url : HOST + "/ProperApp/j_spring_security_check",
            type : "POST",
            data : $("#login").serialize(),
            dataType: 'json',
            async : false,
            success: function(result) {
                if (result.login) {
                    callback(true);
                } else {
                    callback(false);
                }
            }
        })
}

在firefox的响应中,我可以看到正在设置的cookie,并且调用了成功回调:

Set-Cookie  JSESSIONID=81235e7ff741e941c1e078afee5c; Path=/ProperApp; HttpOnly

但是,在后续请求(例如此请求)中,cookie未发送:

function getUserDeets(callback){
    $.ajax({
        url : HOST+ "/ProperApp/userData",
        type : "GET",
        async : false,
        dataType : 'json',
        xhrFields: {
                withCredentials: true
            },
        success : function(data){
            callback(data);
        }
    })
}
$('#submitLogin').click(function(){
            sudoLogin(function(loggedIn){
                if(loggedIn){
                    //window.location = "sudoIndex2.php";
                    getUserDeets(function(user){
                       alert(user);
                    })

                }
                else
                    alert("login failure");
            });
        });

在Chromium中,请求包含cookie标头,并且正确调用成功回调:

...
Connection:keep-alive
Cookie:JSESSIONID=8129ef67b59180f9f21383cba850
Host:localhost:8080
Origin:http://localhost:8000
Referer:http://localhost:8000/loginSignup.php
...

但是在Firefox中,请求标头不包含cookie标头,并且永远不会调用成功:

...
Connection  keep-alive
Host    localhost:8080
Origin  http://localhost:8000
Referer http://localhost:8000/loginSignup.php
...

我在服务器端创建了一个ajax过滤器,我认为应该允许这种情况发生:

response.setHeader("Access-Control-Allow-Origin", request.getHeader("origin"));
response.setHeader("Access-Control-Max-Age", "360");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Headers", "Authorization");

知道为什么这会在Chrome中无缝运行而不是Firefox?

2 个答案:

答案 0 :(得分:4)

如果您希望使用本机ajax或jquery ajax,请删除async:false。它对我有用。

为了进一步兼容旧浏览器,我建议使用http://easyxdm.net/wp/。 EasyXDM方法是使用iframe hack,要求您在正在进行ajax调用的主机上放置一个html文件。这将是强制性的同步,是的。但是这个easyXDM的好处在于你不必担心cors标题。

答案 1 :(得分:3)

首先提出几点意见:

  • OP(原帖)处理跨域XHR,因为AustinR使用不同的端口(如果主机,域或端口的任何部分不同,那么浏览器将XHR视为跨域)
  • 跨域XHR需要在服务器上设置适当的CORS标头
  • OP中的javascript似乎很好,除了async:false,理想情况下应设置为async:true(或跳过,因为设置默认为true)

参考给出的示例,我将从以下CORS标题开始:

response.setHeader("Access-Control-Allow-Origin", "http://localhost:8000"); // use a wildcard (*) as the 2nd parameter if you want to be less restrictive
response.setHeader("Access-Control-Max-Age", "360");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET");
response.setHeader("Access-Control-Allow-Headers", "Origin");
response.setHeader("Access-Control-Expose-Headers","Access-Control-Allow-Origin");

最后一个CORS设置“Access-Control-Expose-Headers”特别有用,因为它使您有机会对服务器在HTTP响应中发送的标头进行故障排除。

检查Firebug网络面板中的响应标头部分以获取CORS标头。 请求的“Origin”标头应与服务器响应的“Access-Control-Allow-Origin”标头的模式匹配。