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
Skip to solution: 20:08
@DiegoArrietaM
4 жыл бұрын
THAAAAAAAAAANKS!!!!
@KanikaDawar1997
4 жыл бұрын
Hey! didn't work for me
@syedmoiz6434
4 жыл бұрын
Thank you OMG thank you..
@abnerdelcid6240
4 жыл бұрын
didn't work for me, "proxy is not a function" any idea?
@akramjonabdullayev3629
4 жыл бұрын
Thank you
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!
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
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.
Thanks a ton, spent so much time figuring this out , your video is so much detailed.
Thank you, after spending hours, finally I found your video!!
@pinch5378
3 жыл бұрын
And you spent 26 min here
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
4 жыл бұрын
Monika Sahai Happy to hear that!
You really saved my life. Providing such an easy and straightfoward answer! thank you!
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
4 жыл бұрын
Thanks for your kind words!
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?
This video help me to solve the CORS issue. Many thanks buddy!
You're a life saver. You explained everything perfectly and provided such clear, concise solutions. Saved me so much time.
@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
After wasting whole day.. got fixed by your trick. thanks man.
Thank you, man. You have safe my life. Once again appreciated what you are doing
This is such a useful video. You're an excellent teacher.
@honglytech
2 жыл бұрын
Thanks a lot
Thank you *VERY MUCH*! You saved me after hours and hours of researching!
@honglytech
3 жыл бұрын
I’m so glad you found it helpful. I was struggling the same.
Thank you so much! Literally spent 4 hours before I found your video!
@honglytech
3 жыл бұрын
I feel your pain! Glad this video helped you solved the issue.
It was worth the long video. Thanks a lot.
You are a true LIFE SAVER, thanks alot
You are the best. I needed this for a project and you really saved me! Thank you so much!!!
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.
Thanks! Solved in IonicFramework creating the SetupProxy.js in the src folder and importing js file :)
Thank you very much!!!! I've searching the solution for many hours, but nothing can solve, Really appreciate this solution!!
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
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?
This solution worked for me! Thank you very much!
Hi, I have tried your solution. It works on localserver but not when I host the project to GitHub Pages. Please help
Thank you so much. It worked the first time.
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?
I I spent all day long searching trying to fix this, you saved me! haha thankssss
@honglytech
4 жыл бұрын
Marcela Freire Happy that this tutorial helps!
Wow it worked! Finally! Thank you man.
Great solution. Bless you for saving everyone's time!
I have been searching for this solution for 4 days.. really really thank you from South Korea... I've just subcribed to you
You are ❤️. Hats off 🎩. Bless you man for creating this video. Saved a great deal of time for me. 👍🏻👍🏻👍🏻
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
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 ?
i have try it and working fines, thanks :D
Thanks. very helpful the whole video.
if the end point is same and URL is different, how to handle in that case
I see people commenting a lot of hate, but THANK YOU for your video! It was the answer to my bug!
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.
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.
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.
Can u please tell me how to resolve provisional header are shown problem
Thank you ! I was just wondering why we have to add the proxy , why doesn’t react just let us call the api regularly ?
how about in the production build? thanks
Finally.. I have solved this error after watching this video :) Thanks a lot.
how to deploy it to netlify ? this is not working in production.
Thank you very much! Your video is very useful.
thanks dude, helped me a lot
watching this in 2021, still fixing my goddam issues perfectly!! Thank you so much!
Hello its not working after build can you help me with that?
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
4 жыл бұрын
you need use createProxyMiddleware for new version
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
4 жыл бұрын
I have the exact same problem. Did you find a solution ?
@vaibhavshinde6926
2 жыл бұрын
I also have same issue. You found any solution
@ruchipatel3375
Жыл бұрын
same. have you found solution?
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
3 жыл бұрын
You can take a look at the source code. Link is in the video description.
Perfect solution! Thanks a ton!
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
3 жыл бұрын
You can try this stackoverflow.com/questions/49582891/proper-way-to-fix-potential-security-vulnerability-in-a-dependency-defined-in-pa
can we fetch data in react hosted on localhost from php api hosted in cpanel online
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
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.
Many thanks, can we use this in production or should use express server.
@honglytech
3 жыл бұрын
It is recommended to enable CORS in the backend server.
i hate that u spend 30 min to write a simple line in package.json, but i luv that u solve my issue lol
THANK YOU SO MUCH! This was getting me mad, finally it worked, THANK GOD, and THANKS TO YOU! =)
@honglytech
4 жыл бұрын
I’m glad that this video helped to solve your issue :)
Thank you so much! So helpful!
but the proxy solution won't work in production right ?
Can it use in deployment env?
Thank you very much! It really helped!
Thank you. I've been watching it since 20:11
My project is only of ReactJS not installed any express .But axios post method throwing me the same error ?
@honglytech
4 жыл бұрын
Boina Chandra Kanth Please skip to 20:08 and follow to fix only ReactJS issue
Will the last solution work in production?
Thank you, man! You brought me to life.
@honglytech
3 жыл бұрын
You’re welcome
Life saver. thanks so much. after 2 days. finally.
Thank you so much! this problem spends, up all my day! you save my night !
@honglytech
Жыл бұрын
Great to hear!
able to solve the problem but not able to call another uri with same url but requestMapping different
Proxy solution works great - but i'm just wondering if there's any drawbacks to this?
Thank you Hong Ly
this video was really helpful after wasting my 12 hours I got this solution , thank you so much for the video :)
Thank u so much, you really helped me!!
@honglytech
4 жыл бұрын
You’re welcome, Wassim
You are the man!
Greate video and it works. Many thanks!
Thank you, Dear. This solves my issue.
Thank you, Life Saver...
any fix for production?
What a video😁such errors can make you rethink your careeer
Thank you so much, you saved my time. :)
Thanks man really helped me!
@honglytech
4 жыл бұрын
Glad I could help!
kudos, great solution!
Nice work. Thank you.
It works very well, thank you.
so many thanks for share!!! ❤❤❤
This doesn't work on production mode. Has anyone managed to solve that?
@pankajmishra3559
3 жыл бұрын
hi, did you find any fix for production?
lon live man. love u....u really helped me explained perfectly
Fantastic! thank you Ly
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
4 жыл бұрын
Did u find a solution? Im having the same problem. Thanks!
@marcelosdm86
4 жыл бұрын
@@leonardosariego1901 yes! Would you like some help?
@leonardosariego1901
4 жыл бұрын
@@marcelosdm86 would be Great! It works when I test it on localhost but on the host wont.
@marcelosdm86
4 жыл бұрын
@@leonardosariego1901 yes, this is what happens! Do you have a link to a repository, so I could help you?
@leonardosariego1901
4 жыл бұрын
@@marcelosdm86 github.com/lsariego/modulos_salesforce Thanks so much in advance for any tip!
Thank you a lot
Thank You!! This is a great vid
@honglytech
4 жыл бұрын
Luan Bui Thanks Luan!
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
3 жыл бұрын
Did you find any solution ?
Thank's man! It worked!!
i guess jsonplaceholder doesnt create any CORS error. it will work fine if u just use the url on axios.
Sir please help me to add this TypeScript
Thank you! Finally a solution. Almost smashed my PC lol
@honglytech
3 жыл бұрын
I’m glad you didn’t 😆