如何防止未经授权访问我的 API 端点？

Question

让我解释一下我想要实现的目标以及我已经尝试过的内容。

//问题
我有一个使用 nextjs 构建的 API 端点
API 网址远程：- http://codingsamadhan.com/api/portfolio
API 网址本地 - http://localhost:3000/api/portfolio
这是我想要在我的网站上显示的投资组合项目的 API，我做到了。但问题是任何人都可以请求 API，甚至你也可以请求端点。

//我想要什么？
现在这个端点是公开访问的，任何人都可以发出 GET 请求，我想阻止这种情况，我希望只有我的网站codingsamadhan.com 应该发出请求，并且只有访问我的网站的人才能在我的网站上看到投资组合项目，而无需登录或任何会话，我不想允许其他人在其他地方调用我的 API 端点。

//我在想
我不想使用 next-auth 或 JWT 对 API URL 进行身份验证，因为我想在无需登录的情况下在我的网站上显示项目，就像产品一样，如果有任何方法可以在无需登录的情况下使用 next-auth 或 JWT 对端点进行身份验证请告诉我，我不知道。

//我已经尝试过
我在使用 fetch() 方法进行 API 调用期间尝试了 api-key 标头，但我意识到 api-key 在浏览器控制台的网络选项卡中可见。所以我觉得如果我的 api-key 对公众可见，那么 api-key 标头也毫无意义。

应用程序/api/portfolio/route.js

export const GET = async (request) => {
  // get api key
  const headersList = headers();
  const apiKey = headersList.get("X-Api-Key");
  const validKey = process.env.API_KEY;

  // check valid api key
  if (validKey === apiKey) {
    await connectDB();
    const portfolioItems = await getPortfolioItems(request); // this function is created in another palce
    return NextResponse.json(portfolioItems);
  } else {
    return NextResponse.json({ message: "Unauthorized Access!" });
  }
};

获取带 headers 的 api

export const fetchPortfolioItems = async (category, siteName, sort, page) => {
  const response = await fetch(
    `/api/portfolio?siteCategory=${category || ""}&&siteName=${siteName || ""}&&sort=${sort || "latest"}&&page=${page || "1"}&&perPage=${3}`,
    {
      method: "GET",
      headers: {
        "X-Api-Key": "30JmsSQENLRPnpECk25gftymnKUQ9H1SMpQ5k4leFUTw0QgAA8vvH0gkzBV1heEXA7Wv9HK2WspLLPFn8BnSfaBd5xSZLgtk",
      },
    }
  );
  return response.json();
};

“X-Api-Key”在浏览器控制台的网络选项卡中可见，所以这个方法对我来说没有用。

Answer 1

也许尝试在你的 nextjs 中使用 SSR。首先，您将在服务器上创建包含详细信息的网页，然后将其提供给客户端。通过这种方法，没有人可以看到你正在使用什么 API。

服务器端渲染（SSR），数据获取