Next.js Discord

Discord Forum

cors issue

Answered
Netherland Dwarf posted this in #help-forum
Open in Discord
Netherland DwarfOP
Hello i've been dealing with a cors issue with my local developpement, I'm trying to request my nextjs api endpoint but it is being rejected by cors, here are the following informations

Localhost request:
    const response = await fetch(import.meta.env.VITE_WEBHOOK_URL + '/api/webhooks/manager', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Access-Control-Allow-Origin': '*',
            'Authorization': `Bearer ${bearerToken}`,
        },
        body: JSON.stringify({
            email: email,
            password: password,
        }),
    });

NextJs endpoint:
export async function OPTIONS(request: Request) {
    const allowedOrigin = request.headers.get("origin");
    const response = new NextResponse(null, {
        status: 200,
        headers: {
            "Access-Control-Allow-Origin": allowedOrigin || "*",
            "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
            "Access-Control-Allow-Headers":
                "Content-Type, Authorization, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version",
            "Access-Control-Max-Age": "86400",
        },
    });

    return response;
}

export default async function POST(req: Request) {
...
}
Answered by Arboreal ant
oh wait I see.

Remove this from the client fetch:

'Access-Control-Allow-Origin': '*',
View full answer

8 Replies

Netherland DwarfOP
/** @type {import('next').NextConfig} */
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: "*" },
                    {
                        key: "Access-Control-Allow-Methods",
                        value: "GET,OPTIONS,PATCH,DELETE,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",
                    },
                ],
            },
        ];
    },
};

module.exports = nextConfig

Cnsole error output:
[Error] Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers.
[Error] Fetch API cannot load ........./api/webhooks/manager due to access control checks.
[Error] Failed to load resource: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers. (manager, line 0)
Netherland DwarfOP
UP PLEASE
Arboreal ant
import.meta.env.VITE_WEBHOOK_URL -> why is this in a nextjs app?

Or do you have a standalone react app which is making requests to your nestjs api endpoint?
Arboreal ant
oh wait I see.

Remove this from the client fetch:

'Access-Control-Allow-Origin': '*',
Answer
Arboreal ant
It's not an allowed header, and it should only be set on the server side
The error is saying that your client has made a request with a header that's not allowed.
@Arboreal ant The error is saying that your client has made a request with a header that's not allowed.
Netherland DwarfOP
That's the issue yes! Thanks a lot ! Next time, i'll be more careful. Again, thanks a lot!
Arboreal ant
Awesome 🙂 happy to help! Can you mark my post as the solution please?