快捷導(dǎo)航

一文詳細分析前端請求中的“Unsupported?Media?Type”問題

更新時間：2024年10月11日 10:17:39 作者：小小野豬

在Web開發(fā)中,前后端交互頻繁遇到HTTP狀態(tài)碼415錯誤,這表明服務(wù)器無法處理因Content-Type不匹配的請求,常見于POST或PUT請求,必須確保請求頭中的Content-Type與服務(wù)器期望的一致,跨域請求中,需要的朋友可以參考下

引言

在進行Web開發(fā)的過程中，尤其是前后端交互時，前端開發(fā)者經(jīng)常會遇到HTTP狀態(tài)碼為415 “Unsupported Media Type”的錯誤。該錯誤表明服務(wù)器無法處理客戶端發(fā)送的請求，因為請求體的媒體類型（MIME type）不受支持。

問題解析

當(dāng)客戶端發(fā)起POST、PUT等包含請求體的HTTP請求時，通常會在請求頭（Request Headers）中指定Content-Type字段來說明請求體的數(shù)據(jù)格式。如果服務(wù)器端只接受特定類型的請求體，而客戶端發(fā)送的Content-Type與其不符，則服務(wù)器會返回415錯誤。

例如，假設(shè)服務(wù)器期望接收JSON格式數(shù)據(jù)（Content-Type: application/json），而客戶端卻以XML或其他格式提交，就可能出現(xiàn)此錯誤。

示例1：未正確設(shè)置Content-Type

// 錯誤示例：嘗試以JSON格式發(fā)送數(shù)據(jù)，但沒有設(shè)置正確的Content-Type
fetch('/api/endpoint', {
  method: 'POST',
  body: JSON.stringify({ key: 'value' })
});

在此示例中，雖然請求體內(nèi)容是JSON格式，但是沒有明確指定Content-Type，服務(wù)器可能無法識別并因此返回415錯誤。

修復(fù)示例1：

// 修復(fù)：確保設(shè)置正確的Content-Type
fetch('/api/endpoint', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

示例2：跨域請求中預(yù)檢OPTIONS失敗

在CORS（跨源資源共享）環(huán)境下，對于非簡單請求（如帶自定義頭部或非GET/HEAD方法的請求），瀏覽器會自動先發(fā)送一個OPTIONS預(yù)檢請求。如果服務(wù)器對OPTIONS請求響應(yīng)的"Access-Control-Allow-Headers"中沒有列出"Content-Type"，也會導(dǎo)致實際請求報415錯誤。

修復(fù)示例2：

確保服務(wù)器端配置正確允許"Content-Type"頭，并在響應(yīng)OPTIONS請求時包含：

// 服務(wù)器端偽代碼示例（如Node.js Express框架）
app.options('/api/endpoint', function(req, res) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'POST, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.send(204);
});