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
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.
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
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" },
]
}
]
}
}
also this discussion:
https://github.com/vercel/next.js/discussions/47933
https://github.com/vercel/next.js/discussions/47933
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
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
When i am off work ill help more
If you dont get it by then
Giant pandaOP
yeah .com is a problem because .vercel.app is working fine
goodsie
what are you using for server on .com?
Giant pandaOP
do you meant domain name ?
goodsie
I meant what server software/solution are you using?
vercel.app is hosted on vercel right?
vercel.app is hosted on vercel right?
Anay-208 | Ping For Help
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