如何隐藏nextjs api路由，使其不可以通过url直接访问？

Question

有没有办法让 next.js API 在通过 URL 访问时隐藏路由响应数据？我想隐藏路线，因为有些数据我不想被用户直接访问。

Answer 1

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

https://nextjs.org/blog/next-13-1#nextjs-advanced-middleware

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 路由调用并具有适当的权限。 迪尔

Answer 3

nextjs 中无法通过 url 向用户隐藏 API 路由。事实上，当您托管网站时，任何人都可以公开使用 nextjs API 路由，而无需从外部文件夹导出和托管。我结束了使用 Node Express 制作服务器端路由，然后连接到 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 路由并只允许选定的路由。