На запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Ошибка CORS Next.js при использовании следующего подключения

Question

Я пытаюсь использовать в Next.js с next-connect. Однако я не могу заставить его работать.

Вот мой код:

      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, например /questions/27468462/problema-cors-v-zaprashivaemom-resurse-otsutstvuet-zagolovok-access-control-allow-origin/27468478#27468478

Я также пробовал устанавливать такие пакеты, как cors & nextjs-cors но получаю ту же ошибку:

Доступ для получения по адресу https://api.twitter.com/oauth/authorize?oauth_token=xxxxxxxxxxxx'(перенаправлен с http: // localhost: 3000 / api / twitter / generate-auth-link) из источника http : // 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 файл вообще не вызывается.

Мне нужен этот файл для промежуточного программного обеспечения. Как мне это решить?

Answer 1

На самом деле я не звонил промежуточному программному обеспечению. Это было в другом файле.

Я удалил cookie-session и сохранил next-iron-session поскольку мне нужна только 1 сессионная библиотека.

Затем я сделал экспорт в api/twitter/generate-auth-link маршруты как оболочка для handler().get(generateAuthLink) функция вместо просто generateAuthLink.

А затем я изменил интерфейс, чтобы не использовать fetch но вместо этого используйте Link.

Это исправлено!