无法从Ajax getAllResponseHeaders获取自定义HTTP头响应

Question

我可以翻译这段内容。这是一个有关编程的问题，作者已经成功获取到响应数据，但无法获取自定义的HTTP头信息。这是一个跨域请求，使用了JavaScript进行Ajax请求。作者尝试过使用XMLHttpRequest和jQuery $.ajax方法，同时也对服务器进行了设置，在发送数据时设置了相关参数。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET

我确实获得了想要的响应数据，但我无法获得完整的HTTP头响应。

使用PHP，在发送文本响应之前，我设置了以下内容。因此，我认为我应该通过getAllResponseHeaders()获取它。

header('Expires: 0');
header('Cache-Control: must-revalidate, post-check=0, pre-check=0');
header('My-Own-Test: nodatahere');

但这是我得到的。

Content-Type: text/plain; charset=x-user-defined
Cache-Control: must-revalidate, post-check=0, pre-check=0
Expires: 0

它缺少了My-Own-Test。仅供参考，这是我的Javascript代码：

var formData = new FormData();
formData.append('username', 'my_username');
formData.append('book_id', 'test password');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'https://mydomain.com/proc.php', true);
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.onload = function(e) { 
    console.log(this.getAllResponseHeaders());
};
xhr.send(formData);

我甚至尝试使用jQuery... 结果相同。

var data_to_send = {
    username: 'my_username',
    password: 'test_password'
};
var ajaxObj;
ajaxObj = $.ajax({
    url: "https://mydomain.com/proc.php",
    data: data_to_send,
    type: "POST", 
    beforeSend: function ( xhr ) {
        xhr.overrideMimeType("text/plain; charset=x-user-defined");
    }
})
.done(function ( data ) {
    console.log( ajaxObj.getAllResponseHeaders()  );
});

仍然没有运气。

但是如果我通过Firebug或Chrome的开发者工具，我可以看到这些工具确实返回完整的HTTP标头信息，包括Content-Length，Content-Encoding，Vary，X-Powered-By，Set-Cookie，Server，当然还有My-Own-Test。

- Iszuddin Ismail

---

我猜这应该会有所帮助。https://dev59.com/G2Uq5IYBdhLWcg3wN90t#14689355 - jbl

太棒了！！！这太容易了。我确实有 Access-Control-Allow-Headers，但我想我漏了 Access-Control-Expose-Headers。就是这个问题。谢谢你，伙计。我在 Stack Overflow 上找了很久，没想到我竟然错过了这个。再次感谢。这节省了我大量的时间，也许是几天。 - Iszuddin Ismail

很高兴能够提供帮助；-) 不要忘记接受你的答案。 - jbl

Answer 1

我想感谢jbl向我指出正确的SO问题。现在我明白了...

那么，好的...答案。如果你曾经想过设置自己的HTTP头信息，并使用跨域Ajax或类似的东西来获取它，那么在发送响应文本之前，你应该在服务器端设置一些额外的HTTP头。

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: POST, GET");      
header('Custom-Header: Own-Data');
header('Access-Control-Expose-Headers: Custom-Header');

上面的示例使用了PHP。但是请使用您自己的语言，无论您使用什么来设置它们。

当我提出这个问题时，除了Access-Control-Expose-Headers之外，我已经拥有了所有这些内容。在添加了它之后，我的Javascript Ajax可以读取HTTP Header Custom-Header的内容。

- Iszuddin Ismail

---

Access-Control-Expose-Headers 对我有用，谢谢。 - PuiMan Cheui