如何使用js或jQuery向ajax請求添加自定義HTTP標頭？

本文翻譯自：How can I add a custom HTTP header to ajax request with js or jQuery?

有誰知道如何使用JavaScript或jQuery添加或創建自定義HTTP標頭？

---

#1樓

參考：https://stackoom.com/question/WFh5/如何使用js或jQuery向ajax請求添加自定義HTTP標頭

---

#2樓

Or, if you want to send the custom header for every future request, then you could use the following: 或者，如果要爲每個將來的請求發送自定義標頭，則可以使用以下內容：

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

This way every future ajax request will contain the custom header, unless explicitly overridden by the options of the request. 這樣，除非被請求的選項明確覆蓋，否則每個未來的ajax請求都將包含自定義標頭。 You can find more info on ajaxSetup here 你可以在這裏找到關於ajaxSetup更多信息

---

#3樓

There are several solutions depending on what you need... 根據您的需要，有幾種解決方案......

If you want to add a custom header (or set of headers) to an individual request then just add the headers property: 如果要將自定義標頭（或標頭集）添加到單個請求，則只需添加headers屬性：

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

If you want to add a default header (or set of headers) to every request then use $.ajaxSetup() : 如果要爲每個請求添加默認標頭（或標頭集），請使用$.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' } });

If you want to add a header (or set of headers) to every request then use the beforeSend hook with $.ajaxSetup() : 如果你想添加一個頭（或套頭）的每一個請求，然後使用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' } });

Edit (more info): One thing to be aware of is that with ajaxSetup you can only define one set of default headers and you can only define one beforeSend . 編輯（更多信息）：需要注意的一點是，使用ajaxSetup您只能定義一組默認標頭，並且只能定義一個beforeSend 。 If you call ajaxSetup multiple times, only the last set of headers will be sent and only the last before-send callback will execute. 如果多次調用ajaxSetup ，則只會發送最後一組標題，並且只會執行最後一個before-send回調。

---

#4樓

You should avoid the usage of $.ajaxSetup() as described in the docs . 您應該避免使用文檔中描述的$.ajaxSetup() 。 Use the following instead: 請改用以下內容：

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

---

#5樓

You can also do this without using jQuery. 您也可以在不使用jQuery的情況下執行此操作。 Override XMLHttpRequest's send method and add the header there: 覆蓋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;

---

#6樓

You can use js fetch 你可以使用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();