缺少 headers 以响应 jQuery CORS 请求

Question

我正在尝试使用 jquery buy 执行 CORS 请求我遇到了奇怪的行为。当我使用 curl 执行请求时，一切正常。但是当我使用 jQuery 时，事情就变得非常糟糕。在浏览器的 "Network" 选项卡中，我可以检查来自 back-end 的请求和响应，那里的一切都是正确的但尽管我有 Access-Control-Expose-Headers： Set-Cookie header 当我尝试使用 console.log(response.getResponseHeader("Set-Cookie"));当我尝试在控制台中使用 console.log(response.getAllResponseHeaders()) 打印出我的 ajax 请求的响应 headers我只得到这 3 个 headers:

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/ :

During a CORS request, the getResponseHeader() method can only access simple response headers. Simple response headers are defined as follows:

Cache-Control

Content-Language

Content-Type

Expires

Last-Modified

Pragma

If you want clients to be able to access other headers, you have to use the Access-Control-Expose-Headers header. The value of this header is a comma-delimited list of response headers you want to expose to the client.

Answer 2

我找到了解决方案。

在服务器端 在响应中添加这些 header：

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 and after that Sending credentials with cross-domain posts? 使用 jQuery

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

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

缺少 headers 以响应 jQuery CORS 请求

Missing headers in response for jQuery request with CORS

ajax

jquery

header

response

reactjs