沒有從 express 和 node.js 中的 api 調用獲得所需的響應

Question

這個問題在使用這些技術時會引起 - React.js | Node.js | Express.js | MongoDB

我開發了一個 API 端點api/events/allevents如下 -

router.get('/allevents', async (req, res) => {
    let success = false;
    try{
        const allevents = await Event.find({});
        success = true;
        res.json({success, allevents});
    }
    catch(err){
        res.status(400).json({ success: success, error: "no events found" });
    }
})

我在 VS Code 中的 Thunder Client 中對其進行了測試，一切都很完美，並得到以下響應-

{
  "success": true,
  "allevents": [
    {
      "_id": "62d021d273b4565d056574ac",
      "title": "The Summer Night",
      "description": "The Summer Night is a musical night in which singers and bands will perform live.",
      "address": "New Delhi Auditorium",
      "city": "New Delhi",
      "state": "New Delhi",
      "country": "India",
      "days": 1,
      "date": "30/7/2022"
    }
  ]
}

然后在它之后，我試圖通過 React.js 組件中的以下函數調用它，如下所示 -

        async function fetchAllEvents() {
            const response = await fetch('/api/events/allevents', {
                method: 'get',
            }
            );
            console.log(response);
            let json = await response.json();
            console.log(json);
        }
        fetchAllEvents();

在 Edge 瀏覽器的控制台中，這是響應 -

為什么在 Thunder Client 的情況下我沒有得到與上述相同的預期響應？ 我知道我非常接近得到正確的響應，但我沒有得到那個小錯誤。 你能幫我嗎？ 如果有人詳細解釋api endpoint definition和api call如何相互通信，那將是一個很大的幫助。

請忽略錯誤，因為它來自初學者的一面:)

Answer 1

意外的標記 < 表示響應是 HTML 而不是 JSON，原因可能是此處共享的代碼以外的其他內容。 您可以通過查看瀏覽器開發工具控制台/網絡選項卡的控制台輕松識別它。 通過查看此處的代碼，您應該做出的改變是，

將響應作為 jsonp 發送（在傳輸上非常方便，然后是 json）

router.get('/allevents', async (req, res) => {
    let success = false;
    try{
        const allevents = await Event.find({});
        success = true;
        res.jsonp({success, allevents});
    }
    catch(err){
        res.status(400).json({ success: success, error: "no events found" });
    }
})



async function fetchAllEvents() {
            try {
            const response = await fetch('/api/events/allevents', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                  }
            }
            );
            console.log(response);
            let json = await response.json();
            console.log(json);
            }
         catch(error) {
           console.error(error)
          }  
        }
        fetchAllEvents();