Как мне отправить массив с fetch?(Javascript)

Question

Я пытаюсь отправить массив, используя fetch, который выглядит следующим образом:

{"cards":[[189,2],[211,2],[238,2],[778,2],[985,2],[1008,2],[1073,2],[1171,2],[48886,2],[49161,2],[49164,2],[49184,1],[49356,2],[50372,2],[51722,1],[52422,2]],"heroes":[1066],"format":2}

Вот что я пытаюсь:

 getCardsForDeck = deck => {
    var stringifiedDeck = JSON.stringify(deck);
    console.log("stringifiedDeck:" + stringifiedDeck);
    fetch(`http://localhost:3001/api/getCardsForDeck`, {
      method: "PUT",
      body: stringifiedDeck
    })
      .then(cards => cards.json())
      .then(res => this.setState({ cards: res.cards }));
  };

Я получаю ошибку, хотя:

Unhandled Rejection (SyntaxError): Unexpected token < in JSON at position 0

Как отправить эти данные, если не с помощью JSON.stringify (), или мне нужно отредактировать данные, чтобы убрать скобки?

После проверки API на вкладке сетиэто дает мне это:

     SyntaxError: Unexpected token o in JSON at position 1
[0]     at JSON.parse (<anonymous>)
[0]     at parse (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\body-parser\lib\types\json.js:89:19)
[0]     at C:\Users\User\projects\webapp\deck-editor\backend\node_modules\body-parser\lib\read.js:121:18
[0]     at invokeCallback (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:224:16)
[0]     at done (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:213:7)
[0]     at IncomingMessage.onEnd (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:273:7)
[0]     at IncomingMessage.emit (events.js:194:15)
[0]     at endReadableNT (_stream_readable.js:1125:12)
[0]     at process._tickCallback (internal/process/next_tick.js:63:19)
[0] SyntaxError: Unexpected token o in JSON at position 1
[0]     at JSON.parse (<anonymous>)
[0]     at parse (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\body-parser\lib\types\json.js:89:19)
[0]     at C:\Users\User\projects\webapp\deck-editor\backend\node_modules\body-parser\lib\read.js:121:18
[0]     at invokeCallback (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:224:16)
[0]     at done (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:213:7)
[0]     at IncomingMessage.onEnd (C:\Users\User\projects\webapp\deck-editor\backend\node_modules\raw-body\index.js:273:7)
[0]     at IncomingMessage.emit (events.js:194:15)
[0]     at endReadableNT (_stream_readable.js:1125:12)
[0]     at process._tickCallback (internal/process/next_tick.js:63:19)

Answer 1

Вы, похоже, ожидаете, что http://localhost:3001/api/getCardsForDeck отправит JSON назад после отправки JSON на it. Скорее всего, он отвечает HTML, а не JSON.

В этом коде есть две другие ошибки:

1. Вы должны сказать, что отправляете, поскольку это не данные по умолчанию в кодировке URI:

   fetch(`http://localhost:3001/api/getCardsForDeck`, {
     method: "PUT",
     body: stringifiedDeck,
     headers: {                              // ***
       "Content-Type": "application/json"    // ***
     }                                       // ***
   })
   

2. Вам необходимо проверить статус ответа. ( Все пропускают это.) Самый простой способ - проверить флаг ok в ответе:

   fetch(`http://localhost:3001/api/getCardsForDeck`, {
     method: "PUT",
     body: stringifiedDeck,
     headers: {
       "Content-Type": "application/json"
     }
   })
   .then(response => {
     if (!response.ok) {                                  // ***
       throw new Error("HTTP error " + response.status);  // ***
     }                                                    // ***
     // ...use `response.json`, `response.text`, etc. here
   })
   .catch(error => {
     // ...handle/report error
   });