时间戳

首页 > 解决方案 > Next.js 默认是同站点来源，但我仍然可以访问它

next.js - Next.js 默认是同站点来源，但我仍然可以访问它

问题描述

我想知道如何保护我的 api 路由。文档说，默认情况下 api 路由是相同的站点来源。

API 路由不指定 CORS 标头，这意味着它们仅在默认情况下是同源的。您可以通过使用 cors 中间件包装请求处理程序来自定义此类行为。 Next.js 文档

但是如果我使用像 Postman 这样的请求工具，我总是可以调用它并得到结果：

// Next.js API route support: https://nextjs.org/docs/api-routes/introduction

export default (req, res) => {
  res.status(200).json({ name: 'John Doe' })
}

这怎么可能？我只想限制对我的应用程序的访问。

标签： next.js

解决方案

我发现https://github.com/vercel/next.js/blob/canary/examples/cms-contentful非常有用，可以帮助我解决同样的问题，即不再使用 API 路由作为页面的主要数据检索等。在此示例中，他们将数据检索代码放在/lib/api.js文件中（而不是在 API 路由中）。是否使用页面 ( https://github.com/vercel/next.js/blob/canary/examples/cms-contentful/pages/posts/%5Bslug%5D.js ) 或 API ( https:// github.com/vercel/next.js/blob/canary/examples/cms-contentful/pages/api/preview.js）数据检索和数据库连接被排除在您的 API 路由之外。如果您只希望您的应用程序页面访问数据，我怀疑您可以一起跳过使用 API 路由。

这是另一个非常简单的沙箱示例（但我建议先查看上面的 GitHub 示例）：

https://codesandbox.io/s/data-retrieval-outside-api-7zlmn?file=/pages/index.js

推荐阅读