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

Question

我正在尝试使用 jquery buy 执行 CORS 请求，但出现了奇怪的行为。当我使用 curl 执行请求时，一切正常。但是当我使用 jQuery 时，事情就大错特错了。在我的浏览器的“网络”选项卡中，我可以检查来自后端的请求和响应，一切都正确 但虽然我有 Access-Control-Expose-Headers: Set-Cookie header 当我尝试使用 console.log(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。有关更多信息，请参阅如何使用 jQuery Set-Cookie on Browser with Ajax Request via CORS 和之后 Sending credentials with cross-domain posts?

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

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