如何在NextJS API端点中获取API调用源

Question

我设置了一个接收令牌的API，并且我想将该令牌存储在数据库中。我还想保存原始URL

假设我的API端点位于https://myapp.com/api/connect

现在，我想从我的网站https://mywebsite.net发送一个令牌

在我发送令牌之后，我希望能够将令牌和网站URL存储到NextJS代码中的数据库。

我的端点将把这个信息存储到数据库:

{
token: someRandomToken
origin: https://mywebsite.net
}

我尝试从处理程序记录整个req对象，看看是否存在该信息，但控制台日志很快填满了我的终端。

Answer 1

在Next的服务器端环境中，您可以访问req.headers.host以及由Vercel或其他平台的反向代理设置的其他标头，以告诉请求的实际来源，如:

/pages/api/some-api-route.ts:

import { NextApiRequest } from "next";
const LOCAL_HOST_ADDRESS = "localhost:3000";
export default async function handler(req: NextApiRequest) {
let host = req.headers?.host || LOCAL_HOST_ADDRESS;
let protocol = /^localhost(:d+)?$/.test(host) ? "http:" : "https:";
// If server sits behind reverse proxy/load balancer, get the "actual" host ...
if (
req.headers["x-forwarded-host"] &&
typeof req.headers["x-forwarded-host"] === "string"
) {
host = req.headers["x-forwarded-host"];
}
// ... and protocol:
if (
req.headers["x-forwarded-proto"] &&
typeof req.headers["x-forwarded-proto"] === "string"
) {
protocol = `${req.headers["x-forwarded-proto"]}:`;
}
let someRandomToken;
const yourTokenPayload = {
token: someRandomToken,
origin: protocol + "//" + host, // e.g. http://localhost:3000 or https://mywebsite.net
};
// [...]
}

在这种情况下，使用Typescript在挖掘属性时非常有用。我不知道你是否在使用Typescript，但如果你没有，你必须删除NextApiRequest。