自定義請求頭是在進行 Ajax 請求時，通過設置特定的請求頭信息，向服務器傳遞自定義的參數。然而，在某些情況下，我們可能會發現自定義請求頭無法成功添加到 Ajax 請求中。本文將深入探討這個問題，并嘗試找到解決方案。 一般情況下，在 Ajax 請求中添加自定義請求頭非常簡單。我們只需調用 `setRequestHeader` 方法即可。例如： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'api/data', true); xhr.setRequestHeader('my-header', 'value'); xhr.send(); ``` 上述代碼中，我們通過 `setRequestHeader` 方法設置了名為 `my-header` 的自定義請求頭，并將其值設置為 `value`。然而，出乎意料的是，有時候我們會發現服務器并沒有接收到我們傳遞的自定義請求頭。 這個問題的一個常見原因是跨域請求。跨域請求是指瀏覽器在一個域下的網頁請求另一個域下的資源。在這種情況下，瀏覽器會發送一個預檢請求（Preflight Request），以確認服務器是否允許真實請求。預檢請求是一種 OPTIONS 請求，并不包含自定義請求頭。因此，當我們在真正的請求中添加了自定義請求頭時，服務器無法識別它們。 例如，假設我們的網頁被托管在 `example.com`，我們向 `api.example.com` 發送 Ajax 請求，并嘗試添加自定義請求頭： ```javascript var xhr = new XMLHttpRequest(); xhr.open('GET', 'http://api.example.com/data', true); xhr.setRequestHeader('my-header', 'value'); xhr.send(); ``` 在這種情況下，瀏覽器會先發送 OPTIONS 請求，然后才發送真實的 GET 請求。但是，OPTIONS 請求不包含我們添加的自定義請求頭。因此，服務器在預檢請求中收到的請求頭為空，會認為我們未設置自定義請求頭。 解決這個問題的一種方法是，服務器配置允許接收自定義請求頭。在處理 OPTIONS 請求時，服務器應該返回一個包含允許的請求頭的響應。例如，在使用 Node.js 的 Express 框架時，可以使用 `cors` 中間件來處理跨域請求，并設置 `Access-Control-Allow-Headers` 響應頭，允許接收特定的自定義請求頭： ```javascript var express = require('express'); var cors = require('cors'); var app = express(); app.use(cors({ allowedHeaders: 'my-header' })); app.options('/data', function(req, res) { res.header('Access-Control-Allow-Headers', 'my-header'); res.send(); }); app.get('/data', function(req, res) { // 處理請求 res.send('Data'); }); app.listen(3000); ``` 在上述代碼中，我們使用 `cors` 中間件來配置跨域請求，并使用 `Access-Control-Allow-Headers` 響應頭允許接收 `my-header` 請求頭。這樣，當瀏覽器發送 OPTIONS 請求時，服務器會正確響應，并在真實請求中接收到自定義請求頭。 除了跨域請求外，還有其他一些情況可能導致自定義請求頭無法成功添加到 Ajax 請求中。例如，某些瀏覽器或安全策略可能限制了一些特定的請求頭，防止潛在的安全風險。在這種情況下，我們可以嘗試使用其他的請求頭，或者查閱相關文檔，找到與當前環境兼容的解決方案。 總結起來，雖然自定義請求頭是在 Ajax 請求中傳遞自定義參數的常用方式，但在一些特定的情況下，我們可能會發現自定義請求頭無法成功添加到請求中。對于跨域請求，服務器應配置允許接收自定義請求頭的響應，以解決這個問題。對于其他限制請求頭的情況，則需要根據具體的環境和需求，尋找相應的解決方案。