ฉันจะเพิ่มส่วนหัว HTTP แบบกำหนดเองลงในคำขอ ajax ด้วย js หรือ jQuery ได้อย่างไร

ไม่มีใครรู้วิธีเพิ่มหรือสร้างส่วนหัว HTTP ที่กำหนดเองโดยใช้ JavaScript หรือ jQuery

มีหลายวิธีขึ้นอยู่กับสิ่งที่คุณต้องการ ...

หากคุณต้องการเพิ่มส่วนหัวที่กำหนดเอง (หรือชุดของส่วนหัว) ลงในคำขอส่วนบุคคลเพียงแค่เพิ่ม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' } });

หากคุณต้องการเพิ่มส่วนหัว (หรือชุดส่วนหัว) ให้กับทุกคำขอให้ ใช้beforeSendhook ด้วย$.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 และเพิ่มส่วนหัวที่นั่น:

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/

ควรใช้วิธี "setRequestHeader" ของวัตถุ XMLHttpRequest

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

คุณสามารถใช้การดึง js

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