如何隐藏nextjs API路由，使其无法通过URL直接访问

Question

通过URL访问next.js API路由响应数据时，是否有任何方法可以使其隐藏？我想隐藏路线，因为有些数据我不想被用户直接访问。

Answer 1

在Next.js版本13中，您可以使用中间件通过检查req.referer来阻止用户直接检查您的api的路由，然后只有您的应用程序可以调用和应用程序的api。Auth令牌也可以在中间件内部使用。

https://nextjs.org/blog/next-13-1#nextjs-高级中间件

import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
export function middleware(req: NextRequest) {
const url = req.nextUrl
const { pathname } = url
if (pathname.startsWith(`/api/`)) {
if (!req.headers.get("referer")?.includes(process.env.APP_URL as string)) {
return NextResponse.json({ message: 'Unauthorized' }, { status: 401 });
}
}
return NextResponse.next()
}
export const config = {
matcher: ['/((?!_next|fonts|examples|svg|[\w-]+\.\w+).*)'],
}

process.env.APP_URL是应用程序的URL，例如：http://localhost:3000

Answer 2

可能很快；保护API路由的简单方法是通过具有保存/创建和销毁端点的无状态会话管理库(如iron-session(来验证和无效Next JS API路由

试试Vercel的github示例。这可能是一个很好的起点。

记住： 始终使用最佳身份验证机制来保护任何具有适当权限的直接api路由调用。DYOR

Answer 3

无法通过nextjs中的url向用户隐藏API路由。事实上，当您托管网站而不从文件夹导出和托管时，任何人都可以公开使用nextjs API路由。我使用nodeexpress完成了服务器端路由，然后在nextjs中连接到前端。

Answer 4

隐藏API路由是非常不值得的。以及用于保护API中的重要数据。。有CORS和身份验证方法可以防止不必要的流量我在这个上发现了精彩的博客

https://dev.to/a7u/how-to-protect-nextjs-api-routes-from-other-browsers-3838

Answer 5

您可以设置一个授权头，每次用户访问API时都会检查验证密钥，这样普通用户就无法在不知道验证密钥的情况下访问页面

Answer 6

您可以通过实现一个秘密令牌来实现这一点，您可以在每个请求的头部将该令牌传递给api，并且您可以在后端检查令牌是否不在这里，您可以向用户显示另一条消息

Answer 7

我已经搜索了很多正确的方法。但似乎唯一的解决方案是使用Nginx作为反向代理服务器，它可以隐藏api路由，只允许选择路由。