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
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
@goodsie maybe this helps?
js
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" },
]
}
]
}
}
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
@Giant panda 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
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
@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?
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