0

我正在尝试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但遇到了同样的错误：

访问从源“http”获取“https://api.twitter.com/oauth/authorize?oauth_token=xxxxxxxxxxxx”（重定向自“http://localhost:3000/api/twitter/generate-auth-link”） ://localhost:3000' 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我在这里有一个 Github 复制品 → https://github.com/deadcoder0904/twitter-api-v2-3-legged-login-using-next-connect（请参阅cors的最新提交）

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

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

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

4

1 回答 1

0

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

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

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

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

这解决了它！

于 2021-09-25T15:44:26.317 回答