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/reactjs/
GitHub Repo
github.com/lyhd/reactjs/tree/...
Temporary solutions:
Run Chrome without CORS
alfilatov.com/posts/run-chrom...
Browser Plugin
chrome.google.com/webstore/de...
cors-anywhere.herokuapp.com/ + [API URL]
Free APIs:
github.com/public-apis/public...
People experience the issue
github.com/axios/axios/issues...
Click to Subscribe: bit.ly/Subscribe-Hong-Ly & turn on notifications to find out when I upload new videos.
Website: honglytech.com
Medium: / lyhong.rupp
#reactjs #cors #reacttutorial

Пікірлер: 276

  • @honglytech
    @honglytech4 жыл бұрын

    Skip to solution: 20:08

  • @DiegoArrietaM

    @DiegoArrietaM

    4 жыл бұрын

    THAAAAAAAAAANKS!!!!

  • @KanikaDawar1997

    @KanikaDawar1997

    4 жыл бұрын

    Hey! didn't work for me

  • @syedmoiz6434

    @syedmoiz6434

    4 жыл бұрын

    Thank you OMG thank you..

  • @abnerdelcid6240

    @abnerdelcid6240

    4 жыл бұрын

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

  • @akramjonabdullayev3629

    @akramjonabdullayev3629

    4 жыл бұрын

    Thank you

  • @marcelosdm86
    @marcelosdm864 жыл бұрын

    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!

  • @wuwei7135
    @wuwei71354 жыл бұрын

    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

  • @Drew7795
    @Drew77952 жыл бұрын

    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.

  • @arjun-de6dr
    @arjun-de6dr2 жыл бұрын

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

  • @erickgutierrez5260
    @erickgutierrez52604 жыл бұрын

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

  • @pinch5378

    @pinch5378

    3 жыл бұрын

    And you spent 26 min here

  • @monikasahai6492
    @monikasahai64924 жыл бұрын

    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

    @honglytech

    4 жыл бұрын

    Monika Sahai Happy to hear that!

  • @samgak_imbap862
    @samgak_imbap8622 жыл бұрын

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

  • @ayushikeshri4281
    @ayushikeshri42814 жыл бұрын

    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

    @honglytech

    4 жыл бұрын

    Thanks for your kind words!

  • @kern6365
    @kern63654 жыл бұрын

    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?

  • @CaneDaChodov
    @CaneDaChodov4 жыл бұрын

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

  • @beenicula
    @beenicula2 жыл бұрын

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

  • @honglytech

    @honglytech

    2 жыл бұрын

    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

  • @kninfotechin
    @kninfotechin4 жыл бұрын

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

  • @khamlasiyivang2145
    @khamlasiyivang21453 жыл бұрын

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

  • @beenicula
    @beenicula2 жыл бұрын

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

  • @honglytech

    @honglytech

    2 жыл бұрын

    Thanks a lot

  • @fmaciel2
    @fmaciel23 жыл бұрын

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

  • @honglytech

    @honglytech

    3 жыл бұрын

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

  • @marialali1734
    @marialali17343 жыл бұрын

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

  • @honglytech

    @honglytech

    3 жыл бұрын

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

  • @temiemmanuel3580
    @temiemmanuel35803 жыл бұрын

    It was worth the long video. Thanks a lot.

  • @haikazahid4665
    @haikazahid46654 жыл бұрын

    You are a true LIFE SAVER, thanks alot

  • @viniciusmantovani8619
    @viniciusmantovani86192 жыл бұрын

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

  • @ibrahimalici2132
    @ibrahimalici21324 жыл бұрын

    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.

  • @soymartinacosta
    @soymartinacosta4 жыл бұрын

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

  • @widiaretasafitri9935
    @widiaretasafitri99352 жыл бұрын

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

  • @damonwu9658
    @damonwu96583 жыл бұрын

    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

  • @sarahcarter315
    @sarahcarter3153 жыл бұрын

    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?

  • @MiroCro11
    @MiroCro113 жыл бұрын

    This solution worked for me! Thank you very much!

  • @sakurademon9823
    @sakurademon98233 жыл бұрын

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

  • @TheBobGlaser
    @TheBobGlaser4 жыл бұрын

    Thank you so much. It worked the first time.

  • @siberjanaxhabafti325
    @siberjanaxhabafti3253 жыл бұрын

    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?

  • @marcelafreire6235
    @marcelafreire62354 жыл бұрын

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

  • @honglytech

    @honglytech

    4 жыл бұрын

    Marcela Freire Happy that this tutorial helps!

  • @mikki7522
    @mikki75224 жыл бұрын

    Wow it worked! Finally! Thank you man.

  • @KingTMK
    @KingTMK2 жыл бұрын

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

  • @seongeunlee609
    @seongeunlee6092 жыл бұрын

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

  • @dramastar30
    @dramastar303 жыл бұрын

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

  • @victorpotes
    @victorpotes3 жыл бұрын

    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

  • @danielxxgadd
    @danielxxgadd4 жыл бұрын

    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 ?

  • @husnulmub9956
    @husnulmub99564 жыл бұрын

    i have try it and working fines, thanks :D

  • @MG-bm5oj
    @MG-bm5oj4 жыл бұрын

    Thanks. very helpful the whole video.

  • @Tiruvengadam85
    @Tiruvengadam854 жыл бұрын

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

  • @kaylamartinez3459
    @kaylamartinez34593 жыл бұрын

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

  • @benfranklin4494
    @benfranklin44944 жыл бұрын

    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.

  • @DanielRodrigues-bx6lr
    @DanielRodrigues-bx6lr2 жыл бұрын

    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.

  • @naiemfoysal6974
    @naiemfoysal69743 жыл бұрын

    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.

  • @unknownlion5441
    @unknownlion54413 жыл бұрын

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

  • @ReBoRNxFuze
    @ReBoRNxFuze2 жыл бұрын

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

  • @redmundnacario720
    @redmundnacario7202 жыл бұрын

    how about in the production build? thanks

  • @cutiegorgeous1
    @cutiegorgeous13 жыл бұрын

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

  • @sabujjana2860
    @sabujjana28604 жыл бұрын

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

  • @lizaveta_mak
    @lizaveta_mak4 жыл бұрын

    Thank you very much! Your video is very useful.

  • @caiolucena498
    @caiolucena4984 жыл бұрын

    thanks dude, helped me a lot

  • @raidenc9846
    @raidenc98462 жыл бұрын

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

  • @sleepmusicforme
    @sleepmusicforme2 жыл бұрын

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

  • @mle3638
    @mle36384 жыл бұрын

    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

    @de_leon

    4 жыл бұрын

    you need use createProxyMiddleware for new version

  • @13has
    @13has4 жыл бұрын

    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

    @anandissac3582

    4 жыл бұрын

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

  • @vaibhavshinde6926

    @vaibhavshinde6926

    2 жыл бұрын

    I also have same issue. You found any solution

  • @ruchipatel3375

    @ruchipatel3375

    Жыл бұрын

    same. have you found solution?

  • @3hsemail
    @3hsemail3 жыл бұрын

    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

    @honglytech

    3 жыл бұрын

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

  • @steven_charles
    @steven_charles2 жыл бұрын

    Perfect solution! Thanks a ton!

  • @abc_cba
    @abc_cba3 жыл бұрын

    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

    @honglytech

    3 жыл бұрын

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

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

    can we fetch data in react hosted on localhost from php api hosted in cpanel online

  • @dulcineapena7613
    @dulcineapena76133 жыл бұрын

    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

    @honglytech

    3 жыл бұрын

    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.

  • @whiskeyburns5230
    @whiskeyburns52303 жыл бұрын

    Many thanks, can we use this in production or should use express server.

  • @honglytech

    @honglytech

    3 жыл бұрын

    It is recommended to enable CORS in the backend server.

  • @joao9085
    @joao90852 жыл бұрын

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

  • @ZeeshanAli-nm7eq
    @ZeeshanAli-nm7eq4 жыл бұрын

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

  • @honglytech

    @honglytech

    4 жыл бұрын

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

  • @stephenwhelan606
    @stephenwhelan6062 жыл бұрын

    Thank you so much! So helpful!

  • @yuvrajagarkar8942
    @yuvrajagarkar89423 жыл бұрын

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

  • @miftachulhuda6341
    @miftachulhuda63413 жыл бұрын

    Can it use in deployment env?

  • @urbanavicius
    @urbanavicius2 жыл бұрын

    Thank you very much! It really helped!

  • @user-fk9pc2yu4t
    @user-fk9pc2yu4t3 жыл бұрын

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

  • @boinachandrakanth265
    @boinachandrakanth2654 жыл бұрын

    My project is only of ReactJS not installed any express .But axios post method throwing me the same error ?

  • @honglytech

    @honglytech

    4 жыл бұрын

    Boina Chandra Kanth Please skip to 20:08 and follow to fix only ReactJS issue

  • @alfonsoramirezelorriaga1153
    @alfonsoramirezelorriaga11532 жыл бұрын

    Will the last solution work in production?

  • @grach1993
    @grach19933 жыл бұрын

    Thank you, man! You brought me to life.

  • @honglytech

    @honglytech

    3 жыл бұрын

    You’re welcome

  • @alexbarasa3816
    @alexbarasa38162 жыл бұрын

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

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

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

  • @honglytech

    @honglytech

    Жыл бұрын

    Great to hear!

  • @vickyraj7045
    @vickyraj70453 жыл бұрын

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

  • @rinchen_
    @rinchen_3 жыл бұрын

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

  • @ivo9339
    @ivo93393 жыл бұрын

    Thank you Hong Ly

  • @danishbukhari6693
    @danishbukhari66932 жыл бұрын

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

  • @wassimbelhadjrhouma2805
    @wassimbelhadjrhouma28054 жыл бұрын

    Thank u so much, you really helped me!!

  • @honglytech

    @honglytech

    4 жыл бұрын

    You’re welcome, Wassim

  • @k1ngydoteth403
    @k1ngydoteth4034 жыл бұрын

    You are the man!

  • @99robyy
    @99robyy3 жыл бұрын

    Greate video and it works. Many thanks!

  • @rizwanullah2589
    @rizwanullah25892 жыл бұрын

    Thank you, Dear. This solves my issue.

  • @Mohamed-M-M
    @Mohamed-M-M3 жыл бұрын

    Thank you, Life Saver...

  • @pankajmishra3559
    @pankajmishra35593 жыл бұрын

    any fix for production?

  • @mnjalawalter6336
    @mnjalawalter63363 жыл бұрын

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

  • @hasanugr
    @hasanugr2 жыл бұрын

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

  • @gorkemyalcn4634
    @gorkemyalcn46344 жыл бұрын

    Thanks man really helped me!

  • @honglytech

    @honglytech

    4 жыл бұрын

    Glad I could help!

  • @tfist
    @tfist2 жыл бұрын

    kudos, great solution!

  • @musadulislam3128
    @musadulislam31283 жыл бұрын

    Nice work. Thank you.

  • @marouanesd2480
    @marouanesd24802 жыл бұрын

    It works very well, thank you.

  • @phuhothanh1011
    @phuhothanh10114 жыл бұрын

    so many thanks for share!!! ❤❤❤

  • @JuanJose-ls9mm
    @JuanJose-ls9mm3 жыл бұрын

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

  • @pankajmishra3559

    @pankajmishra3559

    3 жыл бұрын

    hi, did you find any fix for production?

  • @morsecode9689
    @morsecode96892 жыл бұрын

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

  • @chrispolyman5097
    @chrispolyman50972 жыл бұрын

    Fantastic! thank you Ly

  • @marcelosdm86
    @marcelosdm864 жыл бұрын

    Hey guys! Anyone have a clue on how we could implement this solution when deploy the application? I tried to deploy to Heroku, and it don't work anymore...

  • @leonardosariego1901

    @leonardosariego1901

    4 жыл бұрын

    Did u find a solution? Im having the same problem. Thanks!

  • @marcelosdm86

    @marcelosdm86

    4 жыл бұрын

    @@leonardosariego1901 yes! Would you like some help?

  • @leonardosariego1901

    @leonardosariego1901

    4 жыл бұрын

    @@marcelosdm86 would be Great! It works when I test it on localhost but on the host wont.

  • @marcelosdm86

    @marcelosdm86

    4 жыл бұрын

    @@leonardosariego1901 yes, this is what happens! Do you have a link to a repository, so I could help you?

  • @leonardosariego1901

    @leonardosariego1901

    4 жыл бұрын

    @@marcelosdm86 github.com/lsariego/modulos_salesforce Thanks so much in advance for any tip!

  • @jaaaaimeee
    @jaaaaimeee4 жыл бұрын

    Thank you a lot

  • @LBui12345
    @LBui123454 жыл бұрын

    Thank You!! This is a great vid

  • @honglytech

    @honglytech

    4 жыл бұрын

    Luan Bui Thanks Luan!

  • @mdminhajuddin6646
    @mdminhajuddin66463 жыл бұрын

    I am still facing the cord origin problem I am using PHP, mysql server for backend can you please help me how can I overcome with this error

  • @dineshsaharan1660

    @dineshsaharan1660

    3 жыл бұрын

    Did you find any solution ?

  • @viniciusbuzato
    @viniciusbuzato3 жыл бұрын

    Thank's man! It worked!!

  • @benfranklin4494
    @benfranklin44944 жыл бұрын

    i guess jsonplaceholder doesnt create any CORS error. it will work fine if u just use the url on axios.

  • @gsayesh
    @gsayesh3 жыл бұрын

    Sir please help me to add this TypeScript

  • @anthonycalo4047
    @anthonycalo40473 жыл бұрын

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

  • @honglytech

    @honglytech

    3 жыл бұрын

    I’m glad you didn’t 😆

Келесі