js 또는 jQuery를 사용하여 Ajax 요청에 사용자 정의 HTTP 헤더를 추가하려면 어떻게해야합니까?

누구나 JavaScript 또는 jQuery를 사용하여 사용자 정의 HTTP 헤더를 추가하거나 작성하는 방법을 알고 있습니까?

필요한 것에 따라 몇 가지 솔루션이 있습니다 ...

당신이 원하는 경우 개별 요청에 사용자 정의 헤더 (또는 헤더 세트)를 추가 한 후 바로 추가 headers속성을 :

// 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' } });

모든 요청에 ​​헤더 (또는 헤더 세트) 를 추가 하려면 다음 beforeSend과 함께 후크 를 사용하십시오 $.ajaxSetup().

$.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' } });

편집 (추가 정보) : 알아야 할 한 가지는 ajaxSetup기본 헤더 세트를 하나만 정의 할 수 있고 하나만 정의 할 수 있다는 것 beforeSend입니다. ajaxSetup여러 번 호출 하면 마지막 헤더 세트 만 전송되고 마지막 전송 전 콜백 만 실행됩니다.

또는 향후 모든 요청에 ​​대해 사용자 지정 헤더를 보내려면 다음을 사용할 수 있습니다.

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

이렇게하면 요청 옵션에 의해 명시 적으로 재정의되지 않는 한 모든 향후 ajax 요청에 사용자 정의 헤더가 포함됩니다. 여기에서 더 많은 정보를 찾을 수 있습니다ajaxSetup

JQuery ajax를 가정하면 다음과 같은 사용자 정의 헤더를 추가 할 수 있습니다-

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

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 함수를 사용하여 요청을 보내기 전에 이름과 값을 할당 할 수 있습니다.

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;

문서에$.ajaxSetup() 설명 된대로 사용하지 않아야합니다 . 대신 다음을 사용하십시오.

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

"Ajax를 사용할 때"와 "HTTP 요청 헤더" 를 의미한다고 가정 headers하면 전달한 객체 의 속성 을 사용하십시오.ajax()

헤더 (1.5 추가)

기본: {}

요청과 함께 보낼 추가 헤더 키 / 값 쌍의 맵입니다. 이 설정은 beforeSend 함수가 호출되기 전에 설정됩니다. 따라서 머리글 설정의 모든 값을 beforeSend 함수 내에서 덮어 쓸 수 있습니다.

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

XMLHttpRequest 객체의 "setRequestHeader"메소드를 사용해야합니다

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

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();