Axios でフォーム データを渡す方法: _boundary を手動で設定する必要がありますか?

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() などの便利なメソッドを使用する場合、自動シリアル化を防止し、FormData 形式を保持するために contentType と processData を false に設定することが重要です:

<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 中国語 Web サイトの他の関連記事を参照してください。