Fix CORS Error [SOLVED] | React Tutorial

This video tutorial, I will demonstrate to you how to solve the CORS issue in ReactJS.
GitHub Pages URL
lyhd.github.io...
GitHub Repo
github.com/lyh...
Temporary solutions:
Run Chrome without CORS
alfilatov.com/...
Browser Plugin
chrome.google....
cors-anywhere.h... + [API URL]
Free APIs:
github.com/pub...
People experience the issue
github.com/axi...
Click to Subscribe: bit.ly/Subscrib... & turn on notifications to find out when I upload new videos.
Website: honglytech.com
Medium: / lyhong.rupp
#reactjs #cors #reacttutorial

[@honglytech]

Skip to solution: 20:08

[@DiegoArrietaM]

THAAAAAAAAAANKS!!!!

[@KanikaDawar1997]

Hey! didn't work for me

[@syedmoiz6434]

Thank you OMG thank you..

[@abnerdelcid6240]

didn't work for me, "proxy is not a function" any idea?

[@akramjonabdullayev3629]

Thank you

[@benfranklin4494]

first 20min he was just wasting time. sir we already know we have the problem, still u spend 20mins browsing the problem, we came here just to see the solution not to memorize the cors problem.

[@Drew7795]

Two days trying to fix my problem. And with just one line of code, just a proxy in the package and boom...everything resolved. Thanks, man! Thank you very much.

[@kern6365]

This solution is just for fetching static data, what about the one with query needed? also the package.json solution does not work at all, why would you put the api as your proxy?

[@wuwei7135]

thank you very much! I found so many approaches and I still was confused for hours and you went through all of it, I just am glad now..time for a break x'D

[@marcelosdm86]

Hey, I'm just passing by to thank you VERY MUCH! You really taught me alot about CORS in this video, and helped me fix a problem!

[@joao9085]

i hate that u spend 30 min to write a simple line in package.json, but i luv that u solve my issue lol

[@13has]

This solved it for when running locally, but when deployed with AWS Amplify the call returns an HTML file, not the JSON data I'm getting back when running it locally.

[@anandissac3582]

I have the exact same problem. Did you find a solution ?

[@vaibhavshinde6926]

I also have same issue. You found any solution

[@ruchipatel3375]

same. have you found solution?

[@erickgutierrez5260]

Thank you, after spending hours, finally I found your video!!

[@pinch5378]

And you spent 26 min here

[@kaushikayinala9712]

Don't use this solution, you can not deploy your react-app in webserver. You need nodejs to run your app. The CORS problem can only be resolved in the server-side code. The solution suggested in this video is forwarding the HTTP request to a nodejs server and nodejs server will make the HTTP request and forwards the response to the web client.

[@ashwinpatil6103]

If you can provide a solution to this it would be great.
Springboot server with reactJS client , help if possible !

[@yangkai934]

@@ashwinpatil6103 did you find solution?

[@user-fk9pc2yu4t]

Thank you. I've been watching it since 20:11

[@ayushikeshri4281]

the best solution ever found, you explain so well sir. I was stucked and you gave the whole new level of explaination. Thankyou so much

[@honglytech]

Thanks for your kind words!

[@beenicula]

You're a life saver. You explained everything perfectly and provided such clear, concise solutions. Saved me so much time.

[@honglytech]

Thank you. I was struggling the same as you and I know this will help people out there including you. I’m glad this video helped

[@marialali1734]

Thank you so much! Literally spent 4 hours before I found your video!

[@honglytech]

I feel your pain! Glad this video helped you solved the issue.

[@kninfotechin]

After wasting whole day.. got fixed by your trick. thanks man.

[@arjun-de6dr]

Thanks a ton, spent so much time figuring this out , your video is so much detailed.

[@seongeunlee609]

I have been searching for this solution for 4 days.. really really thank you from South Korea... I've just subcribed to you

[@monikasahai6492]

THANK YOU so much! I had been trying to find a solution to this problem since an hour. I was lost because I am new to React. I could access it from browser but not from my React app. This worked for me! \m/

[@honglytech]

Monika Sahai Happy to hear that!

[@beenicula]

This is such a useful video. You're an excellent teacher.

[@honglytech]

Thanks a lot

[@samgak_imbap862]

You really saved my life. Providing such an easy and straightfoward answer! thank you!

[@kaylamartinez3459]

I see people commenting a lot of hate, but THANK YOU for your video! It was the answer to my bug!

[@widiaretasafitri9935]

Thank you very much!!!! I've searching the solution for many hours, but nothing can solve, Really appreciate this solution!!

[@JuanJose-ls9mm]

This doesn't work on production mode. Has anyone managed to solve that?

[@pankajmishra3559]

hi, did you find any fix for production?

[@haikazahid4665]

You are a true LIFE SAVER, thanks alot

[@temiemmanuel3580]

It was worth the long video. Thanks a lot.

[@fmaciel2]

Thank you *VERY MUCH*! You saved me after hours and hours of researching!

[@honglytech]

I’m so glad you found it helpful. I was struggling the same.

[@sakurademon9823]

Hi, I have tried your solution. It works on localserver but not when I host the project to GitHub Pages. Please help

[@DanHajek85]

This video help me to solve the CORS issue. Many thanks buddy!

[@raidenc9846]

watching this in 2021, still fixing my goddam issues perfectly!! Thank you so much!

[@KingTMK]

Great solution. Bless you for saving everyone's time!

[@viniciusmantovani8619]

You are the best. I needed this for a project and you really saved me! Thank you so much!!!

[@khamlasiyivang2145]

Thank you, man. You have safe my life. Once again appreciated what you are doing

[@alperenarici5851]

Thank you I try for 2 days. I asked a question to stackoverflow butI could not get an answer. Thank for video again.

[@honglytech]

I'm glad that I could help you.

[@marcelafreire6235]

I I spent all day long searching trying to fix this, you saved me! haha thankssss

[@honglytech]

Marcela Freire Happy that this tutorial helps!

[@danishbukhari6693]

this video was really helpful after wasting my 12 hours I got this solution , thank you so much for the video :)

[@meshu_amare]

Thank you so much! this problem spends, up all my day! you save my night !

[@honglytech]

Great to hear!

[@dogukaneren7163]

Thank you man 20:10 is very helpful

[@cutiegorgeous1]

Finally.. I have solved this error after watching this video :) Thanks a lot.

[@mle3638]

Thanks for the video.
I followed all the steps and it's working when it's just one but when I implement the more than one URL step I'm getting an error when starting the project that says 'proxy is not function'.
Any hint here?
Thanks

[@de_leon]

you need use createProxyMiddleware for new version

[@elmcapp6032]

Thank you. one recommendation add chapters to long videos so that we can just jump to the solution without all the other info

[@mikki7522]

Wow it worked! Finally! Thank you man.

[@alexbarasa3816]

Life saver. thanks so much. after 2 days. finally.

[@dramastar30]

You are ❤️. Hats off 🎩. Bless you man for creating this video. Saved a great deal of time for me. 👍🏻👍🏻👍🏻

[@tfist]

kudos, great solution!

[@husnulmub9956]

i have try it and working fines, thanks :D

[@DanielRodrigues-bx6lr]

It tells me proxy is not a function. When I change the first line to an import statement instead of a require, it says import cannot be used outside of a module.

[@MiroCro11]

This solution worked for me! Thank you very much!

[@danielxxgadd]

What I dont understand is I am not using a proxy, I am simply cunsuming another API , why then do i need label my other API as a proxy, its not bouncing from thatr to something else , instead it just getting from that ?

[@MG-bm5oj]

Thanks. very helpful the whole video.

[@mnjalawalter6336]

What a video😁such errors can make you rethink your careeer

[@k1ngydoteth403]

You are the man!

[@statuschannel8572]

you save my life, thanks

[@steven_charles]

Perfect solution! Thanks a ton!

[@ibrahimalici2132]

Hi, How can i connect with React Native Mobile app to Asp.Net Signalr. This error => has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

[@sarahcarter315]

Hello! This works perfect when I run my app locally, but my res.data response is undefined when I deploy it to Heroku. How can I fix this?

[@grzegorzmolin]

LIFESAVER!!! Thanks man!

[@TheBobGlaser]

Thank you so much. It worked the first time.

[@Mohamed-M-M]

Thank you, Life Saver...

[@datng2312]

Appreciate it man!

[@ReBoRNxFuze]

Thank you ! I was just wondering why we have to add the proxy , why doesn’t react just let us call the api regularly ?

[@siberjanaxhabafti325]

Hello, thanks for the video. I'm creating an Ionic React app, running on top of Capacitor. Your solution solved my CORS issue when I run my app in the browser (ionic serve), but when I try to run my app on an Android emulator, the proxy in package.json is totally ignored by Android. Do you have any idea how to solve this?

[@damonwu9658]

Thanks Hong Ly, I got a question, how to handle create-next-app proxy settings? Coz this solution doesn't work for create-next-app so far

[@grach1993]

Thank you, man! You brought me to life.

[@honglytech]

You’re welcome

[@morsecode9689]

lon live man. love u....u really helped me explained perfectly

[@naiemfoysal6974]

I using npm i cors. It works. But when I upload image/file in my website. It still shows the cors error. How can I fixed that for upload files/images in server.

[@caiolucena498]

thanks dude, helped me a lot

[@pareshanbabai]

Thanks Man You are Legend

[@soymartinacosta]

Thanks! Solved in IonicFramework creating the SetupProxy.js in the src folder and importing js file :)

[@ivo9339]

Thank you Hong Ly

[@sleepmusicforme]

Hello its not working after build can you help me with that?

[@dulcineapena7613]

This is a very useful video! Thanks a lot, I've been dealing with this problem since the morning and finally my api request works with a custom query and headers. Only one question, we are using the same api between multiple persons, but only in my computer I have this problem... why could it be that?

[@honglytech]

Thanks Dulcinea. The issue that only happens on your computer could be that you and your teammates are running on different browsers, versions and more.

[@compean7360]

Awesome! works!

[@abc_cba]

Hi, i get this error "react-scripts@4.0.1 has 1 high, 82 medium vulns" in package.json , i tried updating the package synk_vulns but nothing worked. Can you kindly help me,please ?

[@honglytech]

You can try this
stackoverflow.com/questions/49582891/proper-way-to-fix-potential-security-vulnerability-in-a-dependency-defined-in-pa

[@ammarali3589]

Nothing works!

[@rizwanullah2589]

Thank you, Dear. This solves my issue.

[@chrispolyman5097]

Fantastic! thank you Ly

[@yuvrajagarkar8942]

but the proxy solution won't work in production right ?

[@rinchen_]

Proxy solution works great - but i'm just wondering if there's any drawbacks to this?

[@ashwinpatil6103]

I love you bro
NO HOMO

[@vickyraj7045]

able to solve the problem but not able to call another uri with same url but requestMapping different

[@amirsalehi3643]

Thank you so mush . It solved my error.

[@bwustinbweem]

legend.. legend

[@urbanavicius]

Thank you very much! It really helped!

[@stephenwhelan606]

Thank you so much! So helpful!

[@markonikolic6346]

The solution is at 20:34. Don't waste your time watching the whole thing

[@AryanSinghBCS]

for people running django as backend you guys can use corsheaders

[@Tiruvengadam85]

if the end point is same and URL is different, how to handle in that case

[@marouanesd2480]

It works very well, thank you.

[@bryanferry6409]

how fix this error > Missing required request header. Must specify one of: origin,x-requested-with

[@lizaveta_mak]

Thank you very much! Your video is very useful.

[@sabujjana2860]

how to deploy it to netlify ? this is not working in production.

[@viniciusbuzato]

Thank's man! It worked!!

[@AWT_GOLD_TRADING]

THANKS MAN U SAVED MY LIFE

[@honglytech]

jacob radan I’m glad it helps

[@anthonycalo4047]

Thank you! Finally a solution.
Almost smashed my PC lol

[@honglytech]

I’m glad you didn’t 😆

[@ZeeshanAli-nm7eq]

THANK YOU SO MUCH!
This was getting me mad, finally it worked, THANK GOD, and THANKS TO YOU! =)

[@honglytech]

I’m glad that this video helped to solve your issue :)

[@victorpotes]

Hey! Thank you so much, you saved me. However, I'm having a problem with one of the calls I make to my API, I have to call to one API rest twice but with different methods (GET and POST) when I make the first call it works, but the second one not and as I could see, the proxy doesn't change the target to make the call, having as issue 403 forbidden. Can someone help me please? Thanks

[@3hsemail]

Hi @Hong Ly,
I hope you are doing well.
I hope you can help me with this:
1. I installed the http-proxy-middleware package as you said
2. Created the setupProxy.js under src
3. Added the code as in the video
4. Restarted my application but I am getting this issue:
proxy is not a function
Thanks in advance.

[@honglytech]

You can take a look at the source code. Link is in the video description.

[@musadulislam3128]

Nice work. Thank you.

[@unknownlion5441]

Can u please tell me how to resolve provisional header are shown problem

[@hasanugr]

Thank you so much, you saved my time. :)