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
Avatar
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.
Image
Image

13 Replies

Avatar
goodsie
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" },
                ]
            }
        ]
    }
}
Avatar
Giant pandaOP
Thank you for your time, Tried everything but didn't work, and in localhost, there are no issues at all but in production, I have a .com domain for my next server i think that's the reason for my problem?
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
Avatar
goodsie
I use a .com for my production build also.
When i am off work ill help more
If you dont get it by then
Avatar
Giant pandaOP
yeah .com is a problem because .vercel.app is working fine
Avatar
goodsie
what are you using for server on .com?
Avatar
Giant pandaOP
do you meant domain name ?
Avatar
goodsie
I meant what server software/solution are you using?
vercel.app is hosted on vercel right?
Avatar
(coffee) => code
By that, are you using a proxy or something like cloudflare proxy
Avatar
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