web-dev-qa-db-ja.com

Ajax getAllResponseHeadersからカスタムHTTPヘッダー応答を取得できません

応答データは取得しますが、カスタムHTTPヘッダーデータを取得できません。

はい、これはクロスドメインリクエストです。私はJavaScriptでAjaxリクエストをしています。私はこれをXMLHttpRequestとjQuery $ .ajaxで試しました。私はサーバー設定を行いました、私はデータを送信するときにこれらを設定しました：

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

I do必要な応答データを取得します。しかし、完全な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の開発者ツールを実行すると、これらのツールがContent-Length、Content-Encoding、Vary、X-Powered-Byなどの完全なHTTPヘッダー情報を返すことがわかります。 Set-Cookie、Server、そしてもちろんMy-Own-Test。

javascriptjqueryajaxcross-domain
28
Iszuddin Ismail

私は 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ヘッダーのカスタムヘッダーのコンテンツを読み取ることができます。

43
Iszuddin Ismail