Jquery Ajax Firefox不发送cookie（Chrome工作）

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:

我正在尝试在我的应用程序中使用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);
                }
            }
        })
}

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

在firefox的响应中，我可以看到cookie被设置，并且调用成功回调：

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

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

但是，在后续请求中，例如此请求，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");
            });
        });

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

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

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

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

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

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

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

我在服务器端创建了一个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");

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

知道为什么这会在Chrome中无缝地工作而不是Firefox吗？

2 个解决方案

#1

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

如果您希望使用本机ajax或jquery ajax，则删除async：false。它对我有用。

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.

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

#2

A couple of observations first:

首先是几个观察结果：

The OP (original post) was dealing with cross-domain XHR because AustinR was using different ports (if any part of host, domain or port differ then the browser treats the XHR as cross-domain)
OP（原始帖子）处理跨域XHR，因为AustinR使用不同的端口（如果主机，域或端口的任何部分不同，则浏览器将XHR视为跨域）
Cross domain XHRs need proper CORS headers to be set on the server
跨域XHR需要在服务器上设置适当的CORS头
The javascript in the OP seemed fine except for the async:false which should ideally be set to async:true (or skipped because the setting defaults to true)
OP中的javascript似乎很好，除了async：false，理想情况下应该设置为async：true（或跳过，因为设置默认为true）

Referring to the given example I would start off with the following CORS headers:

参考给出的示例，我将从以下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");

The last CORS setting "Access-Control-Expose-Headers" is especially useful because it gives you a chance to troubleshoot the headers that are sent in the HTTP response by the server.

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

Check the response header section in the Firebug network panel for the CORS headers. The "Origin" header of your request should match the pattern of the "Access-Control-Allow-Origin" header of the server response.

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

#1