当我尝试从节点 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 /video/token 中创建了 api 端点，但是当我在 React js 中获取它时，它给出了一个错误

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，它在 JSON 位置 0 处返回 Promise Unexpected token <

 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 ，而不仅仅是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 响应，其中可能带有错误消息。

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

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