为什么将 Next.js API 路由与外部 API 一起使用？答案

【问题标题】：Why use Next.js API route with an external API?为什么将 Next.js API 路由与外部 API 一起使用？
【发布时间】：2021-10-13 15:25:28
【问题描述】：

我是 Next.js 的新手。我想知道export default function handler有什么用，因为我们可以直接使用fetch调用API。

在我的 HTML 代码中，我把代码放在下面。当我点击submit 按钮时，sendformData() 函数将被调用。

<input type="button" value="Submit" onClick={() => this.sendformData()} ></input>

sendformData = async () => {
    const res = await fetch("/api/comments/getTwitFrmUrl?twitUrl=" + this.state.twitUrl, {
      headers: {
        "Content-Type": "application/json",
      },
      method: "GET",
    });

    const result = await res.json();
    this.setState({ data: result.data });
  };

当sendformData函数被调用时，它会调用/api/comments/文件并调用该函数。

这是/api/comments/[id].js文件代码。

export default async function handler(req, res) {
  if (req.query.id == 'getTwitFrmUrl') {
    const resData = await fetch(
      "https://dev.. .com/api/getTwitFrmUrl?twitId=" + req.query.twitUrl
    ).then((response) => response.text()).then(result => JSON.parse(result).data);

    res.status(200).json({ data: resData });
  }
  else if (req.query.id == 'getformdata') {
    console.log('getformdata api');
    res.status(200).json({ user: 'getuserData' });
  }
}

当我将以下代码放入sendformData 时，将检索到相同的响应。那么为什么我们需要调用 export default function handler函数？

 sendformData = async () => {
    const res = await fetch(
          "https://dev.. .com/api/getTwitFrmUrl?twitId=" + req.query.twitUrl
        ).then((response) => response.text()).then(result => JSON.parse(result).data);

    const result = await res.json();
    this.setState({ data: result.data });
  };

【问题讨论】：

什么是https://dev.. .com？也许同源策略会阻止您直接从那里获取数据。
https://dev.. .com 表示后端api域
@MayurVaghasiya 所以如果我理解正确，你的问题本质上是当你可以直接调用外部 API 时，为什么要使用 API 路由来代理对外部 API 的请求？
@juliomalves 是的。我的问题是……

标签： javascript reactjs next.js

【解决方案1】：

如果您已经有一个现有的 API，则没有需要通过 API 路由代理对该 API 的请求。直接调用 API 完全没问题。

但是，也有一些想要这样做的用例。来自API routes documentation：

屏蔽外部服务的 URL（例如 /api/secret 而不是 https://company.com/secret-url）

使用服务器上的环境变量安全地访问外部服务。

本质上，出于安全原因，如果您想要隐藏外部 API URL，或者想要避免向浏览器公开请求所需的环境变量。

【讨论】：