axios deleteメソッドの際にbodyが送れない

Question

現在REST APIを作成しています。削除の機能の際にdeleteメソッド使用しサーバー側を実装しました。
Postmanにて確認したところbodyにjson形式でidを送ることが出来ました。
しかし、axiosを使ってフロントと結合しようとしたところ、うまく送ることができませんでした。

下が該当コードです。

axios
  .delete(process.env.apiAdminBaseUrl + '/user', {
    data: { id : 1 }
  })
  .then((res) => {
    console.log(res);
    this.data.splice(this.editedIndex, 1);
    this.closeDelete();
  });

axiosで送った際のレスポンス

{data: {…}, status: 200, statusText: "OK", headers: {…}, config: {…}, …}
  config: {url: "http://localhost:8000/admin/user", method: "delete", headers: {…}, 
  transformRequest: Array(1), transformResponse: Array(1), …}
  data:
    id: null

paramsによる送信はうまくいきました。
deleteメソッドの際はdataキーで送ることは見つかりましたが、それでもうまくいきませんでした。
何か分かる方がいましたらお力添えいただきたいです。

Answer 1

何か分かる方がいましたらお力添えいただきたいです

まずは調べる機会を頂き、感謝します。
私の判断は、「DELETE要求時にbodyは送れない」というものです。RFC7231 DELETE を参考にしました（DELETEセクション4段落目後半）。

以下、Google翻訳の結果を引用します。

原文

A payload within a DELETE request message has no defined semantics; sending a payload body on a DELETE request might cause some existing implementations to reject the request. Responses to the DELETE method are not cacheable. If a DELETE request passes through a cache that has one or more stored responses for the effective request URI, those stored responses will be invalidated (see Section 4.4 of [RFC7234]).

訳文

DELETE要求メッセージ内のペイロードには定義されたセマンティクスがありません。 DELETE要求でペイロード本体を送信すると、一部の既存の実装が要求を拒否する可能性があります。 DELETEメソッドへの応答はキャッシュできません。 DELETEリクエストが、有効なリクエストURIに対する1つ以上の応答が保存されているキャッシュを通過すると、それらの保存された応答は無効になります（[RFC7234]のセクション4.4を参照）。

ペイロード本体（つまり、ご質問の body）と解釈しました。

---

RFCは、仕様書とは一味違う「標準を提案する」文書です。
「現状はこのように利用されていたが、こんな風に変えてはどうか？」という議論の集積ですので、
ここに記述される実装を無視した サーバー、クライアントを実装すれば可能になるのも事実です。

追記）
gitHub axios.js の xhrAdapter(config) を眺めていると 1000行付近で new XMLHttpRequest() が確認できました（IE対応のため XHRを使っている）。
全体として、axios は Promise で処理できるように、また簡単にコンフィグを指定できるようにしたXHRラッパーに過ぎないので、XHR や fetchのネイティブなコードも試してみるのも良いかもしれません~~（XHR や fetchといった、ブラウザに実装されたHTTP通信機能が DELETE要求するときに body を null にしている可能性もありますが、未確認です）~~。

追記２）
axios 及び、ネイティブ実装（fetchの使用） にて確認：ブラウザ側の開発者コンソール(Networkタブ-Headers)では、Request Payload としてbody が表示され、「送信」されていました。
私の環境（KoaJS + koa-body）では、サーバー側で DELETEメソッドにおいても、Payload Bodyを解析するように設定する必要がありました。

• 回答例に挙げた koa-body では options.strict=false または options.parsedMethods=[許可するメソッドのホワイトリスト] でペイロード本体の解析対象メソッドを選択します。（gitHub:koa-body/../index.js#59-#78）

同様にサーバー側の実装を再確認してみてはどうでしょうか。

Comments

[muteki_gamer]

ご回答ありがとうございます。返信が遅くなり申し訳ありません。
非常に興味深く参考になりました。もう片方の方の回答にあるようにrequestメソッドでmethodにdeleteを指定してあげると本体を受け取ることができました。なのでサーバー側なのかな？という感じです。
機会があるときにもう少し原因を探してみます。

Answer 2

初めまして！

axios.request({
  method: 'delete',
  url: process.env.apiAdminBaseUrl + '/user',
  data: {id: 1},
})

もしかしたら、これで動くかもしれないです！

Comments

[muteki_gamer]

返信遅くなり申し訳ありません。こちらの実装を行ったところ動きました。
deleteメソッドで送れないのはaxiosの仕様って感じなんですかね...

[suny]

動いてよかったです！

仕様というよりかはおそらくバージョン的(?)な問題だと思います！

https://github.com/axios/axios/issues/3220

[muteki_gamer]

なるほど。このissueはすごい助かります。ありがとうざいます!