Next.js Discord

Discord Forum

Nextjs as an public API server preflight request doesn't pass access control check: Redirect is not

Unanswered
Giant panda posted this in #help-forum
Open in Discord
Giant pandaOP
I am creating public APIs using nextjs this is my next.config.js file
Everything works fine on localhost there is no cors error on localhost but in production when origin of my nextjs API server changes I got this error:

has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request

As in localhost everything is working fine I want that in production also it should work fine.

13 Replies

maybe this helps?
const nextConfig = {
    async headers() {
        return [
            {
                // matching all API routes
                source: "/api/:path*",
                headers: [
                    { key: "Access-Control-Allow-Credentials", value: "true" },
                    { key: "Access-Control-Allow-Origin", value: "*" }, // replace this your actual origin
                    { key: "Access-Control-Allow-Methods", value: "GET,DELETE,PATCH,POST,PUT" },
                    { key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
                ]
            }
        ]
    }
}
I am not an expert in this course thing but in localhost, I am handling preflight OPTIONSrequest like this "if (request.method === "OPTIONS") {
return NextResponse.json({}); // Handle preflight OPTIONS request
}" but in production the preflight request redirected me with status code 308 i think that's the problem
@goodsie I use a .com for my production build also. When i am off work ill help more
Giant pandaOP
yeah .com is a problem because .vercel.app is working fine
@Giant panda yeah .com is a problem because .vercel.app is working fine
what are you using for server on .com?
Giant pandaOP
do you meant domain name ?
I meant what server software/solution are you using?
vercel.app is hosted on vercel right?
@Giant panda do you meant domain name ?
By that, are you using a proxy or something like cloudflare proxy
Giant pandaOP
I have figured out a problem my next application is hosted on vercel with 2 domains .com and standard vercel.app and I have my frontend in react also deployed on Vercel so when I request my next API using .com domain it gives me Response to the preflight request doesn't pass access control check: Redirect is not allowed for a preflight request this error but when I request using .vercel.app it working fine