How to Fix CORS Policy Errors When Making Fetch API Requests from a Next.JS Application

To avoid CORS issues while fetching API requests to a server that is outside your control, such as Shopify for instance, run the requests via Next.JS API Routes, the backend of a Next.JS app.

[Dacymida]

BRO, YOU SAVED MY ENTIRE PROJECT, LOV YOU 😭😭😭

[Alphfirm]

Thank you so much! The code was super simple, nothing new there for me, but I didn't really understand the concept of CORS and how to work around it in the next.js front-end, so your explanation was super helpful. Thanks!

[dryujin]

I was trying to find last few days about cors error. but nothing could solve the problem.

wow.. you are amazing. your code works!!
thank you so much really appreciate it

[codingwithlalarukh]

What a tutorial!!!! This tutorial saved my life. Thanks a lot PRO, you're genius :)

[diegogimbernat]

thanks man, helpfull explanation, its exactly what I was looking for and explained in a concise way with examples

[kevinniermann]

Thank you! Had a lot of trouble wirh this exact problem

[ThestKing]

But what about plain, vanilla HTML and JS . I'm not using any FRONTEND framework.

[hohohotreipatlajele]

there is a easiest way, anyway thank you, your video helped me to fix same problem

[rojahm]

this was very helpful for me, i really appreciate it, thank you very much🌟

[GabrielSouza-slvp]

Thank you so much! Its helps me a lot. You saved my week.

[shamshaque]

I'm getting an error, self-signed certificate in certificate chain error.. any idea what is causing this when I'm trying your way to avoid CORS

[olabisiolaoye]

Thanks so much for this explanation. I noticed that you're using the Pages Router in the video, but what if I'm using the App Router instead?

[eleven....]

I am getting cors error while fetching external url how to solve that?on client side

[semenderoranak]

I use app router and face no CORS issue until I call the fetching function inside useEffect or componentDidMount. How can I fetch API request inside useEffect or componentDidMount and still make it serverside

[johannranudd]

Thank you! Very helpful.
This works in next 13 as well, just have to call fetch("api/folderName") and there should be a route.ts file in there that returns:
new Response(JSON.stringify({ data: data }));

[marvy-yehu]

what about in a react app is it just not possible to do in the front-end?

[MBSN]

Thanks a lot! the getStaticProps worked for me. Solved an issue I had for weeks.

Please be aware that getStaticProps won't work in a component.