web-dev-qa-db-ja.com

JsまたはjQueryを使用してカスタムHTTPヘッダーをajaxリクエストに追加する方法を教えてください。

JavaScriptやjQueryを使ってカスタムHTTPヘッダを追加または作成する方法を知っている人はいますか？

javascriptjqueryajaxhttp-headershttprequest
305
Txugo

あなたが必要とするものに応じていくつかの解決策があります...

個々のリクエストにカスタムヘッダ（またはヘッダのセット）を追加する場合は、 headersname__プロパティを追加します。

// Request with custom header
$.ajax({
    url: 'foo/bar',
    headers: { 'x-my-custom-header': 'some value' }
});

すべてのリクエストにデフォルトのヘッダ（またはヘッダのセット）を追加したい場合は、 $.ajaxSetup()を使用します。

$.ajaxSetup({
    headers: { 'x-my-custom-header': 'some value' }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Overwrites the default header with a new header
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

すべてのリクエストにヘッダ（またはヘッダのセット）を追加したい場合は、 $.ajaxSetup()付きのbeforeSendname__フックを使用します。

$.ajaxSetup({
    beforeSend: function(xhr) {
        xhr.setRequestHeader('x-my-custom-header', 'some value');
    }
});

// Sends your custom header
$.ajax({ url: 'foo/bar' });

// Sends both custom headers
$.ajax({ url: 'foo/bar', headers: { 'x-some-other-header': 'some value' } });

編集（詳細）： ajaxSetupname__では、デフォルトヘッダーのセットは1つしか定義できず、beforeSendname__は1つしか定義できないことに注意してください。 ajaxSetupname__を複数回呼び出すと、最後のヘッダーセットのみが送信され、最後の送信前コールバックのみが実行されます。

550
Prestaul

あるいは、今後のリクエストごとにカスタムヘッダーを送信する場合は、次のようにします。

$.ajaxSetup({
    headers: { "CustomHeader": "myValue" }
});

このようにして、リクエストのオプションによって明示的にオーバーライドされない限り、将来のすべてのajaxリクエストにカスタムヘッダーが含まれます。 ajaxSetuphere についてより多くの情報を見つけることができます

51
Szilard Muzsi

これはXHR2を使った例です：

function xhrToSend(){
    // Attempt to creat the XHR2 object
    var xhr;
    try{
        xhr = new XMLHttpRequest();
    }catch (e){
        try{
            xhr = new XDomainRequest();
        } catch (e){
            try{
                xhr = new ActiveXObject('Msxml2.XMLHTTP');
            }catch (e){
                try{
                    xhr = new ActiveXObject('Microsoft.XMLHTTP');
                }catch (e){
                    statusField('\nYour browser is not' + 
                        ' compatible with XHR2');                           
                }
            }
        }
    }
    xhr.open('POST', 'startStopResume.aspx', true);
    xhr.setRequestHeader("chunk", numberOfBLObsSent + 1);
    xhr.onreadystatechange = function (e) {
        if (xhr.readyState == 4 && xhr.status == 200) {
            receivedChunks++;
        }
    };
    xhr.send(chunk);
    numberOfBLObsSent++;
};

それが役立つことを願っています。

オブジェクトを作成した場合は、setRequestHeader関数を使用して、リクエストを送信する前に名前と値を割り当てることができます。

18
James

JQueryをAjaxと仮定すると、以下のようなカスタムヘッダーを追加できます。

$.ajax({
  url: url,
  beforeSend: function(xhr) {
    xhr.setRequestHeader("custom_header", "value");
  },
  success: function(data) {
  }
});
17
Jayendra

JQueryを使わずにこれを行うこともできます。 XMLHttpRequestのsendメソッドをオーバーライドして、そこにヘッダーを追加します。

XMLHttpRequest.prototype.realSend = XMLHttpRequest.prototype.send;
var newSend = function(vData) {
    this.setRequestHeader('x-my-custom-header', 'some value');
    this.realSend(vData);
};
XMLHttpRequest.prototype.send = newSend;
17
Roland T.

docs に記述されているように$.ajaxSetup()の使用を避けるべきです。代わりに以下を使用してください。

$(document).ajaxSend(function(event, jqXHR, ajaxOptions) {
    jqXHR.setRequestHeader('my-custom-header', 'my-value');
});
12
Stefan D.

「ajaxを使用する場合」および「An HTTP Request header」という意味であると仮定し、ajax()に渡すオブジェクトでheadersプロパティを使用します

ヘッダ（1.5を追加）

デフォルト：{}

要求と共に送信する追加のヘッダーキー/値ペアのマップ。この設定は、beforeSend関数が呼び出される前に設定されます。したがって、ヘッダー設定内の値は、beforeSend関数内から上書きすることができます。

- http://api.jquery.com/jQuery.ajax/

6
Quentin

XMLHttpRequestオブジェクトの "setRequestHeader"メソッドを使用してください

http://help.dottoro.com/ljhcrlbv.php

3
4esn0k

Js fetch を使えます

async function send(url,data) {
  let r= await fetch(url, {
        method: "POST", 
        headers: {
          "My-header": "abc"  
        },
        body: JSON.stringify(data), 
  })
  return await r.json()
}

// Example usage

let url='https://server.test-cors.org/server?enable=true&status=200&methods=POST&headers=my-header';

async function run() 
{
 let jsonObj = await send(url,{ some: 'testdata' });
 console.log(jsonObj[0].request.httpMethod + ' was send - open chrome console > network to see it');
}

run();
0
Kamil Kiełczewski