首頁 > web前端 > js教程 > 如何使用axios傳遞表單資料:我應該手動設定_boundary嗎?

如何使用axios傳遞表單資料:我應該手動設定_boundary嗎?

Mary-Kate Olsen
發布: 2024-11-04 05:37:01
原創
352 人瀏覽過

How to Pass Form Data with Axios: Should I Set _boundary Manually?

將資料傳遞到Axios 服務

在這個場景中,目標是將表單資料從loginService 元件傳遞到Services/index 元件存取Axios 實例標頭中的_boundary。實現這一點的關鍵在於理解 HTTP 客戶端如何處理請求體。

HTTP 請求體處理

當使用FormData 發出HTTP 請求時,客戶端會自動設定將Content-Type 標頭新增至multipart/form-data 並包含適當的邊界標記。同樣,對於 URLSearchParams,它將 Content-Type 設定為 application/x-www-form-urlencoded。

修正 Axios 問題

在您的情況下,您想要手動在標頭中設定 _boundary。但是,由於我們已經在使用 FormData,因此運行時將自動處理此問題。如果使用 Axios v0.27.1 或更早版本,可以跳過此步驟。

Node.js 注意事項

在 Node.js 中使用 Axios 時,不會推斷 FormData 標頭自動地。作為解決方法,您可以使用請求攔截器:

<code class="javascript">axios.interceptors.request.use(config => {
  if (config.data instanceof FormData) {
    Object.assign(config.headers, config.data.getHeaders());
  }
  return config;
}, null, { synchronous: true });</code>
登入後複製

或者,在發出請求時手動合併標頭。

jQuery 注意事項

如果使用jQuery 的$.ajax() 或$.post() 等便利方法,請將contentType 和processData 設為false 以防止自動序列化並保留FormData 格式:

<code class="javascript">$.ajax({
  url,
  method: "POST",
  data: body,
  contentType: false,
  processData: false
})</code>
登入後複製

避免使用Axios 版本0.27.1 和1.0.0

這些特定版本的Axios 在處理FormData 時存在已知問題。我們建議改用 Fetch、got 或 ky。

以上是如何使用axios傳遞表單資料:我應該手動設定_boundary嗎?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板