如何在 Next.js 应用程序中正确调用 API

Question

我一直在尝试了解从 Next.js 应用程序调用外部 API 的正确方法是什么，因为我习惯于开发 MERN 堆栈应用程序，我通常使用 axios 进行 API 调用并在 useEffect 中使用它。尝试学习 Next.js 并接受所有信息，我感到困惑，特别是服务器组件之类的，我尝试执行以下操作，它似乎有效，但问题是：这真的是正确的方法吗？

我的下一个应用程序>应用程序>api>你好>route.ts

import axios from "axios";

export async function GET() {
  const response = await axios.get("http://localhost:5000");

  return Response.json(response.data);
}

我的下一个应用程序>你好>page.tsx

"use client";

import axios from "axios";
import * as React from "react";

export default function page() {
  const [msg, setMsg] = React.useState("");

  React.useEffect(() => {
    axios.get("api/hello").then((res) => {
      // { msg: "Hello World!" }
      setMsg(res.data.msg);
    });
  }, []);

  return <div>{msg}</div>;
}

Answer 1

在此示例中，您可以让客户端直接调用该 API。它不需要秘密令牌，并且数据不与其他服务器端数据结合。所以服务器实际上并没有在中间做任何事情。

但是假设您必须使用只有您的服务器知道的秘密令牌来针对此 API 进行身份验证。

现在你的服务器路由看起来更像是：

const secret = 'abcd1234'

export async function GET() {
  const response = await axios.get(`http://externalhost.com?secret=${secret}`);
  return Response.json(response.data);
}

现在假设您想要从此响应中删除您的用户可能无权访问的所有项目。所以你必须做一些过滤：

const secret = 'abcd1234'

export async function GET() {
  const response = await axios.get(`http://externalhost.com?secret=${secret}`);
  const data = response.data.filter(item => !item.hasSensitiveData)
  return Response.json(data);
}

现在情况更加复杂，如果暴露给您的用户，至少有 2 种数据会危及您的安全。

关键是，在大多数实际应用程序中，服务器必须拥有该外部接口，因为服务器拥有客户端没有的数据，让客户端这样做是非常不安全的。

---

是的，看起来不错。