firebase POST url 400 錯誤請求

Question

我正在嘗試使用一種非常簡單的方法從我的 reactjs 應用程序向 firebase 實時數據庫發布請求。 這是一個進入我的數據庫的屏幕截圖。 這里 blogs 下的第一個條目是用戶的 UID，該用戶可以創建多個博客，例如屏幕截圖中的 id b1。

這是我的 POST 請求代碼：

const id = localStorage.getItem('uid')
 const postData = async () => {
        var num = localStorage.getItem('blogNumber')
        const resp = await fetch(
            'https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app.firebaseio.com/blogs.json',
            {
             method: 'POST',
             body: {
                id: {
                    num : {
                        title: titleRef.current.value,
                        description: contentRef.current.value,
                        createdAt: new Date(),
                        isPosted: false
                    }
                }
            },
            headers: {
                'Content-Type': 'application/json'
            }
            });
            const data = await resp.json()
           localStorage.setItem('blogNumber', localStorage.getItem('blogNumber') +1)
    }

嘗試點擊此網址時收到 400 個錯誤請求

但根據這個頁面，這似乎是我正在點擊的正確網址

https://retool.com/blog/your-guide-to-crud-in-firebase-realtimedb-with-rest-api/

Answer 1

這里有很多問題：

• 您沒有在這里使用id或num的值，您需要將它們包裝在方括號中
• fetch API 調用的body屬性應該通過JSON.stringify傳遞。
• 您不應在請求正文中發布 Date 對象。 將其轉換為字符串、將其轉換為純數字、使用時間戳對象或使用服務器值占位符。
• 您的代碼始終假定帖子已成功創建。 fetch API 不會因錯誤的狀態代碼而引發錯誤。 您應該檢查狀態代碼以確定您想要做什么。 由於 Firebase 數據庫操作通常以 JSON 響應，因此我在檢查代碼之前將此處的主體解析為 JSON，但是您可能應該先檢查空主體。
• 每次寫入數據時，使用POST /blogs.json將覆蓋整個/blogs樹。 您應該更改路徑或使用帶有適當正文的 PATCH 請求。

const id = localStorage.getItem('uid')
const postData = async () => {
  const num = localStorage.getItem('blogNumber')
  const reqData = {
    [id]: { // <-- use square brackets for value as key
      [num]: { // <-- use square brackets for value as key
        title: titleRef.current.value,
        description: contentRef.current.value,
        createdAt: Date.now(), // <-- returns milliseconds since epoch
        isPosted: false
      }
    }
  }

  const resp = await fetch(
    'https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app.firebaseio.com/blogs.json',
    {
      method: 'POST',
      body: JSON.stringify(reqData), // you need to stringify this yourself
      headers: {
        'Content-Type': 'application/json'
      }
    }
  );

  
  const data = await resp.json();

  if (!resp.ok) { // fetch API does not throw errors by itself
    const err = new Error('Unexpected status: ' + resp.status);
    err.data = data;
    err.resp = resp;
    throw err;
  }

  localStorage.setItem('blogNumber', localStorage.getItem('blogNumber')+1)
}

更新為使用更深的路徑：

const id = localStorage.getItem('uid')
const postData = async () => {
  const num = localStorage.getItem('blogNumber')
  const reqData = {
    title: titleRef.current.value,
    description: contentRef.current.value,
    createdAt: Date.now(), // <-- returns milliseconds since epoch
    isPosted: false
  }

  const resp = await fetch(
    `https://assignment-c3557-default-rtdb.asia-southeast1.firebasedatabase.app.firebaseio.com/blogs/${uid}/${num}.json`,
    {
      method: 'POST',
      body: JSON.stringify(reqData), // you need to stringify this yourself
      headers: {
        'Content-Type': 'application/json'
      }
    }
  );
  
  const data = await resp.json();

  if (!resp.ok) { // fetch API does not throw errors by itself
    const err = new Error('Unexpected status: ' + resp.status);
    err.data = data;
    err.response = resp;
    throw err;
  }

  localStorage.setItem('blogNumber', localStorage.getItem('blogNumber')+1)
}