当我尝试从节点js获取api时，它没有工作。

Question

import React, { useCallback, useEffect, useState } from "react";
   import { v4 as uuidv4 } from "uuid";
   import { useAppContext } from "./context/appContext";
   import Video from "twilio-video";
   import Room from "./components/Room/Room";
   import { Home, Header } from "./components/index";

   app.post("/video/token", (req, res) => {
     const identity = req.body.identity;
     const room = req.body.room;
     const token = videoToken(identity, room, config);
     sendTokenResponse(token, res);
   });

在上面的部分中，我在节点js /视频/令牌中创建了api端点，但是当我在React中获取它时，会出现一个错误

const data = await fetch("/video/token", {
      method: "POST",
      body: JSON.stringify({
        identity: username,
        room: roomName,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => res.json());

上面的代码正在获取api，它正在返回允诺的意外令牌< at JSON位置0

​

import React, { useCallback, useEffect, useState } from "react";
   import { v4 as uuidv4 } from "uuid";
   import { useAppContext } from "./context/appContext";
   import Video from "twilio-video";
   import Room from "./components/Room/Room";
   import { Home, Header } from "./components/index";

   app.post("/video/token", (req, res) => {
     const identity = req.body.identity;
     const room = req.body.room;
     const token = videoToken(identity, room, config);
     sendTokenResponse(token, res);
   });

​

Answer 1

您应该同时使用async和await，而不仅仅是等待

async function sendData(){
    await fetch("/video/token", {
      method: "POST",
      body: JSON.stringify({
        identity: username,
        room: roomName,
      }),
      headers: {
        "Content-Type": "application/json",
      },
    }).then((res) => res.json());
}

Answer 2

这是因为您试图将api响应解析为json，而不是json。

res.json()

在这里，您应该首先检查api响应(如果它的json是否正确)。

Answer 3

您的问题是您的服务器没有用正确的响应进行响应。这就是为什么你要得到错误的Unexpected token < at JSON position 0。响应的第一个字符是<，这意味着它是一个HTML，其中可能包含一个错误消息。

您应该检查您所得到的响应，看看它是否告诉您有关错误的更多信息。

此外，请确保您正在运行服务器端以及运行客户端。如果服务器没有运行，那么从前端获取时肯定会出现错误。