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.
Donations: www.paypal.com/donate/?hosted...
Follow me on Twitter: / @johne104
KZread Channel: / @bluesphere7930
Email: bluesphere40@gmail.com
Пікірлер: 44
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!
@bluesphere7930
9 ай бұрын
My pleasure. Glad you found it helpful.
BRO, YOU SAVED MY ENTIRE PROJECT, LOV YOU 😭😭😭
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
@bluesphere7930
Жыл бұрын
Thank you for the good words. Good to hear you found it useful.
What a tutorial!!!! This tutorial saved my life. Thanks a lot PRO, you're genius :)
@bluesphere7930
3 ай бұрын
Thank you for your kind words. Glad you found it helpful. Cheers.
thanks man, helpfull explanation, its exactly what I was looking for and explained in a concise way with examples
@bluesphere7930
Жыл бұрын
You bet. Glad you found it helpful.
Thank you so much! Its helps me a lot. You saved my week.
@bluesphere7930
Жыл бұрын
You bet. Good to hear.
this was very helpful for me, i really appreciate it, thank you very much🌟
@bluesphere7930
10 ай бұрын
My pleasure. Good to hear you found it helpful.
Thank you! Had a lot of trouble wirh this exact problem
@bluesphere7930
6 ай бұрын
Glad it helped!
very helpful! Thank you very much
@bluesphere7930
11 ай бұрын
You bet.
Thank you so much. You made my day
@bluesphere7930
9 ай бұрын
You bet.
Thanks so much....
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
your are life saver
Clear example. Thanx
@bluesphere7930
Жыл бұрын
You bet.
what if I have src not pages?
there is a easiest way, anyway thank you, your video helped me to fix same problem
very helpful
@bluesphere7930
10 ай бұрын
Good to hear.
thank you so much
@bluesphere7930
Жыл бұрын
You bet. Good to hear it was helpful.
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?
@bluesphere7930
11 ай бұрын
You bet. In the App Router version, you shouldn't run into a CORS issue because the fetching is done in a server component. CORS is a browser issue only.
@7eleven....
10 ай бұрын
@@bluesphere7930 so we dont need data fatching in client side? like filter etc
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
@Kakashi.b2k
2 ай бұрын
I am also facing the same issue, Of you got the solution them please reply me
I am getting cors error while fetching external url how to solve that?on client side
@bluesphere7930
10 ай бұрын
Run the fetch server-side, not client-side.
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 }));
@bluesphere7930
Жыл бұрын
No problem, good to hear it helped.
what about in a react app is it just not possible to do in the front-end?
@bluesphere7930
Жыл бұрын
Yes, you'll run into the same issue if you run a fetch request in the front-end, because CORS is a browser security mechanism. You'll have to run your fetch request in the back-end of your app.
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.
@bluesphere7930
Жыл бұрын
Glad to hear it helped.