请求的资源上没有“访问-控制-允许-原产地”标题。使用next-connect时出现Next.js CORS错误

Question

我正在尝试在cors中使用Next.js和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，我尝试过StackOverflow上提到的所有其他解决方案，比如https://stackoverflow.com/a/35317615/6141587

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

CORS策略阻止从源'token=xxxxxxxxxxxx‘(从’http://localhost:3000/api/twitter/generate-auth-link'重定向)获取'http://localhost:3000‘的访问:请求的资源上不存在’访问控制-允许-原产地‘头。如果不透明响应满足您的需要，请将请求的模式设置为“no- CORS”，以获取禁用CORS的资源。

我在这里复制了一个https://github.com/deadcoder0904/twitter-api-v2-3-legged-login-using-next-connect 最近提交 (参见cors的最近提交)

我已经检查了Network，但是没有看到在那里设置任何标题。我也添加了console.log('cors')，但是没有打印出来。

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

我需要那个文件作为中间件。我该怎么解决呢？

Answer 1

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

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

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

然后，我将前端改为不使用fetch，而是使用Link。

这个修好了！