NextJS cors error in page but not in API route

Question

I have a nextjs application and when I execute a call to fetch a page from an external website if I do it from the backend via an API route everything works fine however when I do it from the frontend side I get a cors error.

This is the code from the API route:

async function getPage(url: string) {
    const response = await fetch(url);
    // do stuff
}

export async function POST(req: any) {
    const request = await req.json();
    try {
        await getPage(request.url);
        return NextResponse.json({ status: 200 });
    } catch (err: any) {
        console.log(err);
        return NextResponse.json({}, { status: 400, statusText: 'The website does not exist or is currently down.' });
    }
}

This is the same code in the frontend that is throwing an error:

async function getPage(url: string) {
    const response = await fetch(url, {
        mode: 'cors',
        headers: {
            'Access-Control-Allow-Origin': '*',
        }
    });
    // do stuff
}

const fetchPageFromSite = async () => {
        await getPage(url);
}

I am using the fetchPageFromSite inside a useEffect.

@jub0bs thanks for that, do you know what could fix the issue? — Andrea D'Attero, Jul 06 '23 at 08:28

score 1 · Answer 1 · edited Jul 03 '23 at 04:35

1

The concept of CORS - Cross Origin Resource Sharing - is applicable only on the client side. When you are sending request from the server (api route), the url you are fetching from doesn't know about the origin or domain of your website. Thus, your call from api route works without any errors.

edited Jul 03 '23 at 04:35

Explorer

45
12

answered Jul 03 '23 at 04:31

Mayank Kumar Chaudhari

16,027
10
55
122

Is there a way to fix this issue in the client side of my nextjs app? I have tried many different things but none of them work – Andrea D'Attero Jul 06 '23 at 08:28
If you control the API, you can add cors headers. If it is third party API, you can not do anything about it – Mayank Kumar Chaudhari Jul 06 '23 at 08:49

score 0 · Answer 2 · answered Jul 03 '23 at 04:51

CORS must be manage from Back-End (the external website you want to fetch).

Because Back-end of that website need to allow Cross Origin to your page or all (*).

You can find more details about CORS here https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

NextJS cors error in page but not in API route

2 Answers2