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

  • @Alphfirm
    @Alphfirm9 ай бұрын

    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

    @bluesphere7930

    9 ай бұрын

    My pleasure. Glad you found it helpful.

  • @Dacy5mida
    @Dacy5mida8 ай бұрын

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

  • @dryujin1004
    @dryujin1004 Жыл бұрын

    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

    @bluesphere7930

    Жыл бұрын

    Thank you for the good words. Good to hear you found it useful.

  • @codingwithlalarukh5488
    @codingwithlalarukh54883 ай бұрын

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

  • @bluesphere7930

    @bluesphere7930

    3 ай бұрын

    Thank you for your kind words. Glad you found it helpful. Cheers.

  • @diegogimbernat9253
    @diegogimbernat9253 Жыл бұрын

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

  • @bluesphere7930

    @bluesphere7930

    Жыл бұрын

    You bet. Glad you found it helpful.

  • @GabrielSouza-sl8vp
    @GabrielSouza-sl8vp Жыл бұрын

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

  • @bluesphere7930

    @bluesphere7930

    Жыл бұрын

    You bet. Good to hear.

  • @rojahm
    @rojahm10 ай бұрын

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

  • @bluesphere7930

    @bluesphere7930

    10 ай бұрын

    My pleasure. Good to hear you found it helpful.

  • @kevinniermann9160
    @kevinniermann91606 ай бұрын

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

  • @bluesphere7930

    @bluesphere7930

    6 ай бұрын

    Glad it helped!

  • @allissuf
    @allissuf11 ай бұрын

    very helpful! Thank you very much

  • @bluesphere7930

    @bluesphere7930

    11 ай бұрын

    You bet.

  • @minhtuannguyen8213
    @minhtuannguyen82139 ай бұрын

    Thank you so much. You made my day

  • @bluesphere7930

    @bluesphere7930

    9 ай бұрын

    You bet.

  • @accessaccount4719
    @accessaccount47192 күн бұрын

    Thanks so much....

  • @shamshaque1914
    @shamshaque191410 ай бұрын

    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

  • @himindukularathne7075
    @himindukularathne70759 ай бұрын

    your are life saver

  • @zx12393
    @zx12393 Жыл бұрын

    Clear example. Thanx

  • @bluesphere7930

    @bluesphere7930

    Жыл бұрын

    You bet.

  • @kacperkepinski4990
    @kacperkepinski49907 ай бұрын

    what if I have src not pages?

  • @hohohotreipatlajele2044
    @hohohotreipatlajele20448 ай бұрын

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

  • @Inspire-me854
    @Inspire-me85410 ай бұрын

    very helpful

  • @bluesphere7930

    @bluesphere7930

    10 ай бұрын

    Good to hear.

  • @enoch.c
    @enoch.c Жыл бұрын

    thank you so much

  • @bluesphere7930

    @bluesphere7930

    Жыл бұрын

    You bet. Good to hear it was helpful.

  • @olabisiolaoye6168
    @olabisiolaoye616811 ай бұрын

    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

    @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....

    @7eleven....

    10 ай бұрын

    @@bluesphere7930 so we dont need data fatching in client side? like filter etc

  • @semenderoranak2603
    @semenderoranak26034 ай бұрын

    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

    @Kakashi.b2k

    2 ай бұрын

    I am also facing the same issue, Of you got the solution them please reply me

  • @7eleven....
    @7eleven....10 ай бұрын

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

  • @bluesphere7930

    @bluesphere7930

    10 ай бұрын

    Run the fetch server-side, not client-side.

  • @johannranudd6671
    @johannranudd6671 Жыл бұрын

    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

    @bluesphere7930

    Жыл бұрын

    No problem, good to hear it helped.

  • @marvy-ye5hu
    @marvy-ye5hu Жыл бұрын

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

  • @bluesphere7930

    @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.

  • @MBSN91
    @MBSN91 Жыл бұрын

    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

    @bluesphere7930

    Жыл бұрын

    Glad to hear it helped.