Question

我试图用jquery来执行CORS请求，我得到了奇怪的行为。当我使用curl执行请求时，一切正常。但是当我使用jQuery时，事情发生了可怕的错误。在＆＃34;网络＆＃34;我的浏览器中的标签我可以检查请求和来自后端的响应一切正确但是我有 Access-Control-Expose-Headers：Set-Cookie 标头我当我尝试使用console.log打印出来时得到null（response.getResponseHeader（＆＃34; Set-Cookie＆＃34;））;当我尝试使用 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（）方法只能访问   简单的响应标头。简单响应头定义为   如下：


缓存控制

内容语言

内容类型

过期

上次修改

Pragma


如果您希望客户端能够访问其他标头，那么您   必须使用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 。有关更多信息，请参阅Set-Cookie on Browser with Ajax Request via CORS以及Sending credentials with cross-domain posts?之后如何使用jQuery

实际上您无法使用response.getResponseHeader（＆＃34; Set-Cookie＆＃34;）访问Set-Cookie标头，因此您的console.log（）将在每次null时打印。您可以在此处找到原因：$http response Set-Cookie not accessible但您可以检查当前页面的Cookie并检查它们是否设置正确。

注意：请求网址也必须是HTTPS才能获得最佳答案。

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

2 个答案: