next.js 14 hostinger vps nginx pm2 - CORS related issues
I have been stuck on this same issue for days now. I cant seem to ficgure out what im doing wrong. but whenever i login to my app it correctly redirects me to /dashboard but when i click on a sublink i.e. /dashboard/edit
the app wont be able to see my user session anymore.
this is the error i get right after logging in (in browser console):
dashboard:1 Access to fetch at 'https://housifa.com/' (redirected from 'https://housifa.com/api/auth/logout?_rsc=1538b') from origin 'https://housifa.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
Housifa
Housifa - expert in letting and renting homes in Amstelveen
Housifa is your go-to expert for rental homes in Amstelveen. Find the perfect property for rent or let your property with ease. Specializing in letting and renting homes, Housifa offers comprehensive rental services. Contact our dedicated team, available 7 days a week.
Housifa
Housifa - expert in letting and renting homes in Amstelveen
Housifa is your go-to expert for rental homes in Amstelveen. Find the perfect property for rent or let your property with ease. Specializing in letting and renting homes, Housifa offers comprehensive rental services. Contact our dedicated team, available 7 days a week.
2 Replies
and this is my middleware to apply CORS headers:
import { NextRequest, NextResponse } from "next/server";
const allowedOrigins = ["https://housifa.com", "https://housifa.kinde.com"];
const corsOptions = {
"Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
"Access-Control-Allow-Headers": "Content-Type, Authorization",
"Access-Control-Allow-Credentials": "true", // Allow credentials
};
export function middleware(request: NextRequest) {
const origin = request.headers.get("origin");
if (origin && allowedOrigins.includes(origin)) {
if (request.method === "OPTIONS") {
// Handle preflight request
const preflightHeaders = {
"Access-Control-Allow-Origin": origin,
...corsOptions,
};
return NextResponse.json({}, { headers: preflightHeaders });
}
// Handle actual request
const response = NextResponse.next();
response.headers.set("Access-Control-Allow-Origin", origin);
Object.entries(corsOptions).forEach(([key, value]) => {
response.headers.set(key, value);
});
return response;
}
// If origin is not allowed, return a response without CORS headers
return NextResponse.next();
}
export const config = {
matcher: "/:path*",
};
Hi the issue here is you can't call the route from browser fetch. You need to direct the user to the logout route, calling from Javascript is not supported in this way.
Could you give me more details on what you're trying to achieve?