jQuery的阿贾克斯的Firefox不发送的cookie（Chrome浏览器的工作原理）

问题描述

我想在我的应用程序使用Ajax的认证，我似乎已经得到了它的工作，除了火狐似乎并没有被发送正确jessionid到服务器，后续请求的曲奇请求头，而镀铬做这样就好了。下面是登录功能：

I'm trying to use Ajax authentication in my app and I seem to have gotten it working, except firefox does not seem to be sending the correct jessionid to the server in the "cookie" request header for subsequent requests whereas chrome does so just fine. Here is the login function:

$.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被设置，成功回调函数被调用：

In the response in firefox I can see the cookie being set, and the success callback is called:

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

然而，在随后的请求，比如这一次，cookie不会被发送：

However, in subsequent requests, such as this one, the cookie is not being sent:

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");
            });
        });

在铬，请求包含的饼干头，成功回调正确调用：

In Chromium, the request contains the cookie header, and the success callback is called correctly:

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

不过在Firefox，请求头不包含的饼干头，和成功永远不会被调用：

However in Firefox, the request header does not contain the cookie header, and success is never called:

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

香港专业教育学院创建于服务器端的AJAX过滤器，我认为应该允许这样的事情发生：

Ive created a ajax filter on the server side, that I think should be allowing this to happen:

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的？

Any idea why this would work seamlessly in Chrome but not Firefox?

推荐答案

如果你想使用原生的AJAX或jQuery的阿贾克斯，然后脱掉异步：假的。它为我工作。

If you wish to use native ajax or jquery ajax, then strip off async:false. it worked for me.

有关旧的浏览器兼容性的，我建议使用 http://easyxdm.net/wp/ 。 EasyXDM的方法是使用一个iframe的黑客，需要你把一个HTML文件时，你正在做AJAX调用主机。这将有力地异步的，是的。但是，什么是好的这个easyXDM是，你将不必担心CORS头。

For further compatibility on older browsers i recommend using http://easyxdm.net/wp/. EasyXDM approach is to use an iframe hack that requires you to place an html file at the host that you're making ajax calls to. And this will be forcefully async, yes. But what's nice with this easyXDM is that you won't have to worry about cors headers.

这篇关于jQuery的阿贾克斯的Firefox不发送的cookie（Chrome浏览器的工作原理）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！