请求的资源上不存在 'Access-Control-Allow-Origin' header。 Next.js 使用 next-connect 时出现 CORS 错误

Question

我正在尝试在 Next.js 中使用 cors 和 next-connect。但是，我无法让它工作。

这是我的 cors 代码：

function handler() {
  if (!COOKIE_SECRET || !SESSION_SECRET)
    throw new Error(
      `Please add COOKIE_SECRET & SESSION_SECRET to your .env.local file!`
    )

  return nc<NextIronRequest, NextApiResponse>({
    onError: (err, _, res) => {
      error(err)
      res.status(500).end(err.toString())
    },
  })
    .use(
      cookieSession({
        name: 'session',
        keys: [COOKIE_SECRET],
        maxAge: 24 * 60 * 60 * 1000 * 30,
        secure: IS_PRODUCTION && !process.env.INSECURE_AUTH,
        signed: IS_PRODUCTION && !process.env.INSECURE_AUTH,
      })
    )
    .use((req,res,next)=> {
      console.log('cors')
      res.setHeader("Access-Control-Allow-Origin", "*")
      res.setHeader(
        "Access-Control-Allow-Headers",
        "Origin, X-Requested-With, Content-Type, Accept, Authorization"
      );
      if (req.method == "OPTIONS") {
        res.setHeader("Access-Control-Allow-Methods", "PUT, POST, PATCH, DELETE, GET");
        return res.status(200).json({});
      }
      next()
    })
}

export default handler

FWIW，我已经尝试了 Whosebug 上提到的所有其他解决方案，例如

我也试过安装像 cors 和 nextjs-cors 这样的软件包，但得到了同样的错误：

Access to fetch at 'https://api.twitter.com/oauth/authorize?oauth_token=xxxxxxxxxxxx' (redirected from 'http://localhost:3000/api/twitter/generate-auth-link') from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

我这里有一个 Github 复制品 → https://github.com/deadcoder0904/twitter-api-v2-3-legged-login-using-next-connect (see the latest commit for cors)

我检查了网络选项卡，但没有看到其中设置了 headers。我还添加了 console.log('cors') 但它没有打印在那里。

我想根本没有调用中间件 server/api-route.ts 文件。

我需要那个文件作为中间件。我该如何解决？

Answer 1

我实际上并没有调用中间件。它在另一个文件中。

我删除了 cookie-session 并保留了 next-iron-session，因为我只需要 1 个会话库。

然后我在 api/twitter/generate-auth-link 路由中将导出作为 handler().get(generateAuthLink) 函数的包装器，而不仅仅是 generateAuthLink.

然后我将前端更改为不使用 fetch 而是使用 Link.

已修复！

请求的资源上不存在 'Access-Control-Allow-Origin' header。 Next.js 使用 next-connect 时出现 CORS 错误

No 'Access-Control-Allow-Origin' header is present on the requested resource. Next.js CORS error when using next-connect

node.js

express

next.js

next-connect