Hi,
I am getting a "has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status." Cors error when getting redirected from the authentication server to the callback path on my nextjs frontend.

I already added CORS settings to my next config headers. And I check if the origin is coming from the right source in the middleware.
What to do when getting redirected to a nextjs app with cors errors?

callback/page.tsx

import { cookies } from 'next/headers'
import CallbackClient from './callback-client'

export default async function CallbackPage() {
    const cookieStore = await cookies()
    const codeVerifier = cookieStore.get('code_verifier')

    return <CallbackClient codeVerifier={codeVerifier?.value || null} />
}

callback/callback-client.tsx

'use client'

import { useEffect, useState } from 'react'
import { useRouter, useSearchParams } from 'next/navigation'

interface CallbackClientProps {
    codeVerifier: string | null
}

export default function CallbackClient({ codeVerifier }: CallbackClientProps) {
    const router = useRouter()
    const searchParams = useSearchParams()
    const [error, setError] = useState<string | null>(null)

    useEffect(() => {
        async function handleCallback() {
            try {
                const code = searchParams.get('code')
                
                if (!code) {
                    console.error('No code received')
                    setError('No authorization code received')
                    return
                }

                if (!codeVerifier) {
                    console.error('No code verifier found')
                    setError('No code verifier found')
                    return
                }

                console.log('Attempting token exchange with:', {
                    code,
                    verifierLength: codeVerifier.length,
                    redirectUri: window.location.origin + '/callback'
                })

                // Get token from auth server
                const response = await fetch('/api/auth/token', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify({
                        code,
                        code_verifier: codeVerifier,
                        redirect_uri: window.location.origin + '/callback'
                    })
                })

                if (!response.ok) {
                    const errorData = await response.text()
                    console.error('Token request failed:', {
                        status: response.status,
                        statusText: response.statusText,
                        error: errorData
                    })
                    setError(`Token request failed: ${errorData}`)
                    return
                }

                const data = await response.json()
                console.log('Token received successfully')

                // save token
                ...

            } catch (error) {
                console.error('Authentication error:', error)
                setError(error instanceof Error ? error.message : 'Unknown error')
            }
        }

        handleCallback()
    }, [router, searchParams, codeVerifier])

... frontend code