Axios - 刪除帶有請求正文和標頭的請求？

Question

我在 ReactJS 中編程時使用 Axios，我假裝向我的服務器發送 DELETE 請求。

為此，我需要標題：

headers: {
  'Authorization': ...
}

身體由

var payload = {
    "username": ..
}

我一直在互聯網上搜索，只發現 DELETE 方法需要一個“參數”並且不接受“數據”。

我一直在嘗試像這樣發送它：

axios.delete(URL, payload, header);

甚至

axios.delete(URL, {params: payload}, header);

但似乎沒有任何效果......

有人可以告訴我是否有可能（我認為是）發送帶有標頭和正文的 DELETE 請求以及如何發送？

先感謝您！

Answer 1

因此，經過多次嘗試，我發現它有效。

請按照順序進行，這很重要，否則將不起作用

axios.delete(URL, {
  headers: {
    Authorization: authorizationToken
  },
  data: {
    source: source
  }
});

Answer 2

axios.delete確實支持請求正文。 它接受兩個參數： url和可選配置。 您可以使用config.data設置請求正文和標頭，如下所示：

axios.delete(url, { data: { foo: "bar" }, headers: { "Authorization": "***" } });

見這里 - https://github.com/axios/axios/issues/897

Answer 3

下面簡要總結一下用 axios 發送各種 http 動詞所需的格式：

• GET ：兩種方式

  • 第一種方法

    axios.get('/user?ID=12345') .then(function (response) { // Do something })

  • 第二種方法

    axios.get('/user', { params: { ID: 12345 } }) .then(function (response) { // Do something })

  上面兩個是等價的。 觀察第二種方法中的params關鍵字。

• POST和PATCH

   axios.post('any-url', payload).then( // payload is the body of the request // Do something ) axios.patch('any-url', payload).then( // payload is the body of the request // Do something )

• DELETE

   axios.delete('url', { data: payload }).then( // Observe the data keyword this time. Very important // payload is the request body // Do something )

關鍵外賣

• get請求可選地需要一個params鍵來正確設置查詢參數
• 帶有正文的delete請求需要在data鍵下設置

Answer 4

阿西奧斯。 delete傳遞一個 url 和一個可選配置。

axios.delete(url[, 配置])

可用於配置的字段可以包括標題。

這使得 API 調用可以寫成：

const headers = {
  'Authorization': 'Bearer paperboy'
}
const data = {
  foo: 'bar'
}

axios.delete('https://foo.svc/resource', {headers, data})

Answer 5

對於那些嘗試了上述所有方法但仍然看不到請求的有效負載的人 - 確保你有：

"axios": "^0.21.1" (not 0.20.0)

然后，上述解決方案有效

axios.delete("URL", {
      headers: {
        Authorization: `Bearer ${token}`,
      },
      data: {
        var1: "var1",
        var2: "var2"
      },
    })

您可以使用以下方式訪問有效負載

req.body.var1, req.body.var2

這是問題：

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

Answer 6

對於刪除，您需要按照以下操作

axios.delete("/<your endpoint>", { data:<"payload object">})

它對我有用。

Answer 7

我遇到了同樣的問題，我這樣解決了：

axios.delete(url, {data:{username:"user", password:"pass"}, headers:{Authorization: "token"}})

Answer 8

實際上， axios.delete支持請求正文。
它接受兩個參數：一個URL和一個可選的config 。 那是...

axios.delete(url: string, config?: AxiosRequestConfig | undefined)

您可以執行以下操作來設置刪除請求的響應正文：

let config = { 
    headers: {
        Authorization: authToken
    },
    data: { //! Take note of the `data` keyword. This is the request body.
        key: value,
        ... //! more `key: value` pairs as desired.
    } 
}

axios.delete(url, config)

我希望這可以幫助別人！

Answer 9

如果我們有：

myData = { field1: val1, field2: val2 }

我們可以將數據 (JSON) 轉換為字符串，然后將其作為參數發送到后端：

axios.delete("http://localhost:[YOUR PORT]/api/delete/" + JSON.stringify(myData), 
     { headers: { 'authorization': localStorage.getItem('token') } }
 )

在服務器端，我們取回我們的對象：

app.delete("/api/delete/:dataFromFrontEnd", requireAuth, (req, res) => {
    // we could get our object back:
    const myData = JSON.parse(req.params.dataFromFrontEnd)
 })

注意： 2 月 14 日 15:49來自“ x4wiz ”的答案比我的更准確！ 我的解決方案是沒有“身體”（在某些情況下可能會有所幫助......）

更新：當對象的重量為 540 字節 (15*UUIDv4) 及更多時，我的解決方案不起作用（請查看文檔以獲取確切值）。 “ x4wiz ”（以及上面的許多其他）的解決方案要好得多。 那么，為什么不刪除我的答案呢？ 因為，它有效，但大多數情況下，它為我帶來了 Stackoverflow 的大部分聲譽；-)

Answer 10

我找到了一種可行的方法：

axios
      .delete(URL, {
        params: { id: 'IDDataBase'},
        headers: {
          token: 'TOKEN',
        },
      }) 
      .then(function (response) {
        
      })
      .catch(function (error) {
        console.log(error);
      });

我希望這對你也有用。

Answer 11

要通過axios發送帶有一些標頭的 HTTP DELETE，我已經這樣做了：

  const deleteUrl = "http//foo.bar.baz";
  const httpReqHeaders = {
    'Authorization': token,
    'Content-Type': 'application/json'
  };
  // check the structure here: https://github.com/axios/axios#request-config
  const axiosConfigObject = {headers: httpReqHeaders}; 

  axios.delete(deleteUrl, axiosConfigObject);

不同 HTTP 動詞（GET、POST、PUT、DELETE）的axios語法很棘手，因為有時第二個參數應該是 HTTP 正文，而其他時候（可能不需要它）您只需將標頭作為第二個傳遞范圍。

但是，假設您需要發送一個沒有 HTTP 正文的 HTTP POST 請求，那么您需要將undefined作為第二個參數傳遞。

請記住，根據配置對象的定義（ https://github.com/axios/axios#request-config ），您仍然可以在調用axios.delete時通過data字段在 HTTP 調用中傳遞 HTTP 主體，但是對於 HTTP DELETE 動詞，它將被忽略。

第二個參數有時是 HTTP 正文，有時是axios的整個config對象之間的這種混淆是由於 HTTP 規則是如何實現的。 有時，HTTP 調用不需要 HTTP 主體即可被視為有效。

Answer 12

axios.post('/myentity/839', {
  _method: 'DELETE'
})
.then( response => {
  //handle success
})
.catch( error => {
   //handle failure
});

感謝： https ://www.mikehealy.com.au/deleting-with-axios-and-laravel/

Answer 13

我遇到了同樣的問題...我通過創建自定義 axios 實例來解決它。 並使用它來發出經過身份驗證的刪除請求..

const token = localStorage.getItem('token');
const request = axios.create({
        headers: {
            Authorization: token
        }
    });

await request.delete('<your route>, { data: { <your data> }});

Answer 14

我嘗試了以上所有對我不起作用的方法。 我最終只是使用 PUT（在此處找到靈感）並更改了我的服務器端邏輯以在此 url 調用上執行刪除。 （django rest 框架函數覆蓋）。

例如

.put(`http://127.0.0.1:8006/api/updatetoken/20`, bayst)
      .then((response) => response.data)
      .catch((error) => { throw error.response.data; });

Answer 15

與 axios 無關，但可能會幫助人們解決他們正在尋找的問題。 PHP 在執行刪除調用時不解析發布數據。 axios delete 可以通過請求發送正文內容。 例子：

//post example
let url = 'http://local.test/test/test.php';
let formData = new FormData();
formData.append('asdf', 'asdf');
formData.append('test', 'test');

axios({
    url: url,
    method: 'post',
    data: formData,
}).then(function (response) {
    console.log(response);
})

result: $_POST Array
(
    [asdf] => asdf
    [test] => test
)


// delete example
axios({
    url: url,
    method: 'delete',
    data: formData,
}).then(function (response) {
    console.log(response);
})

result: $_POST Array
(        
)

要在 php 中獲取有關刪除調用的發布數據，請使用：

file_get_contents('php://input'); 

Answer 16

您需要像這樣包含有效負載和標頭：

axios.delete(URL, {
  headers: {
    'Authorization': ...
  }, 
  data: {
    "username": ...
  }
})

為什么？ 為什么我不能像使用 POST 請求那樣輕松地做到這一點？

查看Axios 文檔，我們看到 .get、.post... 的方法具有不同的簽名：

axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.options(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

注意只有post 、 patch和put有data參數。 這是因為這些方法通常包含一個主體。

查看RFC7231 ，我們看到 DELETE 請求不應該有正文； 如果你包含一個主體，它的含義在規范中沒有定義，並且服務器不應該理解它。

DELETE 請求消息中的有效負載沒有定義的語義； 在 DELETE 請求上發送有效負載正文可能會導致某些現有實現拒絕該請求。

（從這里的第 5 段開始）。

在這種情況下，如果您還控制着服務器，您可以決定在請求中接受此主體並為其提供您想要的任何語義。 可能您正在使用其他人的服務器，而他們期望這個機構。

因為規范中沒有定義帶有主體的 DELETE 請求，而且它們並不常見，所以 Axios 沒有將它們包含在這些方法別名中。 但是，因為它們是可能的，所以你可以做到，只是需要更多的努力。

我認為在 url 上包含信息會更傳統，所以你會這樣做：

axios.delete(
  `https://example.com/user/${encodeURIComponent(username}`, 
  { headers: ... }
)

或者，如果您希望能夠使用不同的條件（有時通過用戶名、電子郵件或 ID...）刪除用戶

axios.delete(
  `https://example.com/user?username=${encodeURIComponent(username)}`, 
  { headers: ... }
)

Answer 17

使用 data:{key: value}，示例代碼片段如下

//code for frontend

axios.delete(`URL`, {
       data: {id: "abcd", info: "abcd"},
     })
     .then(res => {
       console.log(res);
     });

//code for backend (express.js)

 app.delete("URL", (req, res) => {
 const id = req.body.id;
 const info = req.body.info;
 db.query("DELETE FROM abc_table WHERE id=? AND info=?;", [id, info],
   (err, result) => {
     if (err) console.log(err);
     else res.send(result);
   }
 );
});

Answer 18

Axios DELETE 請求確實支持與 POST 請求類似的功能，但格式不同。

DELETE 請求負載示例代碼：

axios.delete(url, { data: { hello: "world" }, headers: { "Authorization": "Bearer_token_here" } });

POST 請求有效負載示例代碼：

axios.post(url, { hello: "world" }, { headers: { "Authorization": "Bearer_token_here" } });

注意到{ hello: "world" }的配置方式不同，但都執行相同的功能。

Answer 19

實際上，axios.delete 支持請求體。 它接受兩個參數：一個 URL 和一個可選配置。 那是...

axios.delete(url: string, config?: AxiosRequestConfig | undefined) 您可以執行以下操作來設置刪除請求的響應主體：

let config = { headers: { Authorization: authToken }, data: { //! 注意data關鍵字。 這是請求正文。 核心價值， ... //！ 根據需要添加更多key: value對。 } }

axios.delete(url, config) 這對我來說是完美的運行。

Answer 20

此代碼是從郵遞員生成的，它非常適合刪除帶正文的 api 請求。

var data = JSON.stringify({"profile":"false","cover":"true"});

var config = {
  method: 'delete',
  url: 'https://api.fox.com/dev/user/image',
  headers: { 
    'Authorization': 'Bearer token', 
  },
  data : data
};

axios(config)
.then(function (response) {
  console.log(JSON.stringify(response.data));
})
.catch(function (error) {
  console.log(error);
});