CORS NEXT JS
Answered
Beveren posted this in #help-forum
BeverenOP
Hello how to add cors origin next js? i want my site can only send on my api, when i try postman to get api, it gets it. BTW my app deployed on vercel
Answered by B33fb0n3
then you are not able to protect it. The client can be anywhere and don't need to be on your website. The request can also be made from anywhere. Headers and everything inside the request can also be manipulated, so you can trust them. Either exchange a secret with your client (and roll it every X days again) or live with the public endpoint.
Protections against bots for example though feedback forms can also be a good way. For example cloudflare captcha or google captcha
Protections against bots for example though feedback forms can also be a good way. For example cloudflare captcha or google captcha
18 Replies
BeverenOP
what do you mean
sorry im new to next js
@Beveren what do you mean
when I call:
https://your-domain/your/route/ will I be able to receive data (at the current point)? In the future you want to protect it with CORS, I understood that, but from the current point, can I access it?BeverenOP
yes
u can call it
i tried this but deosnt work, i cant get data, always forbidden
const ALLOWED_ORIGIN = 'https://sample.vercel.app';
export async function GET(request: NextRequest) {
const origin = request.headers.get('origin');
// Block requests from origins that are not allowed
if (origin !== ALLOWED_ORIGIN) {
return new NextResponse('Forbidden', { status: 403 });
}
logic...
}
const ALLOWED_ORIGIN = 'https://sample.vercel.app';
export async function GET(request: NextRequest) {
const origin = request.headers.get('origin');
// Block requests from origins that are not allowed
if (origin !== ALLOWED_ORIGIN) {
return new NextResponse('Forbidden', { status: 403 });
}
logic...
}
Thanks for clarifying, that your API is public. The headers and the whole request can be manipulated. CORS shouldn't be used as security. Instead you should use for example tokens, that are only known by your app to prevent unwanted access. Can you clarify how your app calls the API routes?
BeverenOP
but i dont have login signup functionality in my app,
@Beveren but i dont have login signup functionality in my app,
you don't need to. Can you clarify how your app calls the API routes?
BeverenOP
const response = await fetch("/api/feedback", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: feedback.trim() }),
});
if (!response.ok) {
setLoading(false);
throw new Error("Failed to submit feedback");
}
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ message: feedback.trim() }),
});
if (!response.ok) {
setLoading(false);
throw new Error("Failed to submit feedback");
}
like that
BeverenOP
yes sir
@Beveren yes sir
then you are not able to protect it. The client can be anywhere and don't need to be on your website. The request can also be made from anywhere. Headers and everything inside the request can also be manipulated, so you can trust them. Either exchange a secret with your client (and roll it every X days again) or live with the public endpoint.
Protections against bots for example though feedback forms can also be a good way. For example cloudflare captcha or google captcha
Protections against bots for example though feedback forms can also be a good way. For example cloudflare captcha or google captcha
Answer
@Beverensolved?
I'll mark this message for now as solution. Feel free to write something inside this thread if you need further help or remove the solution with /remove-post-answer