缺少使用CORS响应jQuery请求的标头

Question

我正试图用jquery购买执行CORS请求我得到了奇怪的行为.当我使用curl执行请求时,一切正常.但是当我使用jQuery时,事情发生了可怕的错误.在我的浏览器的"网络"选项卡中,我可以检查请求和来自后端的响应,一切都是正确的但是虽然我有Access-Control-Expose-Headers:Set-Cookie标头当我尝试使用console.log打印出来时我得到null(response.getResponseHeader("Set-Cookie")); 当我尝试使用console.log(response.getAllResponseHeaders())在控制台中打印出我的ajax请求的响应头时,我只得到这3个头:

Pragma: no-cache
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Expires: 0

我用来执行请求的代码是:

$.ajax({
    method: "POST",
    url: "http://localhost:8808/storage/login",
    data: {
        username: email,
        password: password,
    },
    success: function(data, textStatus, response){
        console.log(response.getAllResponseHeaders());
        console.log(response.getResponseHeader("Set-Cookie"));
        this.setState({showAlert: true, alertMessage: "You are logged in.", alertType: "success"});
    }.bind(this),
    error: function (xhr, status, err) {
        this.setState({showAlert: true, alertMessage: "Wrong email or password", alertType: "danger"});
    }.bind(this)
});

Answer 1

您是在提出跨域请求吗？

http://www.html5rocks.com/en/tutorials/cors/:

在CORS请求期间,getResponseHeader()方法只能访问简单的响应头.简单响应头定义如下:

• 缓存控制
• 内容语言
• 内容类型
• 过期
• 最后修改
• 附注

如果希望客户端能够访问其他标头,则必须使用Access-Control-Expose-Headers标头.此标头的值是您要向客户端公开的响应标头的逗号分隔列表.

Answer 2

我找到了解决办法。

在服务器端，在响应中添加这些标头：

Access-Control-Allow-Origin: http://localhost:8080
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization, Content-Length, X-Requested-With
Access-Control-Allow-Credentials: true

Access-Control-Allow-Credentials: true这是重要的。但是你不能使用 Access-Control-Allow-Origin: * ！您必须指定特定域，如 Access-Control-Allow-Origin: http://example.com )

在客户端将 ajax 请求更新为以下内容：

$.ajax({
                method: "POST",
                url: "http://localhost:8808/storage/login",
                data: {
                    username: email,
                    password: password,
                },
                xhrFields: {
                    withCredentials: true
                },
                crossDomain: true,
                success: function(data, textStatus, response){
                    console.log(response.getAllResponseHeaders());
                    console.log(response.getResponseHeader("Set-Cookie"));
                    this.setState({showAlert: true, alertMessage: "You are logged in.", alertType: "success"});
                }.bind(this),
                error: function (xhr, status, err) {
                    this.setState({showAlert: true, alertMessage: "Wrong email or password", alertType: "danger"});
                }.bind(this)
            });

这里的重要部分是xhrFields: {withCredentials: true}, crossDomain: true。有关更多信息，请参阅如何通过 CORS 使用 Ajax 请求在浏览器上设置 Cookie，然后使用跨域帖子发送凭据？使用 jQuery

实际上，您无法使用 response.getResponseHeader("Set-Cookie") 访问 Set-Cookie 标头，因此每次为 null 时，您的 console.log() 都会打印。您可以在这里找到原因：$http response Set-Cookie 无法访问，但您可以检查当前页面的 cookie 并检查它们是否设置正确。

注意：请求 url 也必须是 HTTPS 以获得最佳答案。