sir, 4 hour,its 8:25AM, i was trying to solve this from around 3:30AM. you cant imagine how happy i am right now to find those 4 line of code in ur first 10 sec of video...... i love you man even turned on bell icon cz u saved my project, i was about to delete it
Unlike every other youtubers who says bunch of nonsense and non related things before giving the actual information for which we came for, You gave the most important information in the first 10 seconds and proceeded to explain it later. You have our respect.
bro after 2 and a half hours of struggling around , i had lost my hope. and the i decided to watch this full video as my last tether to sanity. and that stupid failed to fetch error is finally gone. thank you dude. god bless you.
This entire list of react focussed videos is great, It is obvious you spent a huge amount of energy on taking us along on the learning curve- just compare the first couple of videos to this, it's a great expansion building on the previous knowledge! This video really blew me away with the quick deployment on railway, that's awesome. Also loving the quick snippet at the start showing the main point!
This clears up a lot for me man. This is the first time I try to make a fullstack app and all these deployment issues are confusing af. Thumbs up for you 👍
I dont really know u and this is my first time of watching ur video but ur video just saved me after 4 days of trying to connect my vite React project with my node js without using cors.......U are a life saver for that am subscribing......thanks again
I never thought that I can solve my intital (proxy setup) and final (deployment) problems by just watching one video. Spent all day trying different way to deploy my project but lost functionality after deployment. Finally deployed using the process in the video and everything is working sooo fine and it's soo easy. I can't thank you more, u really saved my day here and explanation is on point that made me think like, "what the hell, I understand everything this guy saying" . THANK YOU SO MUCH
Thank you so much for this tutorial, I've searched lots of videos and site but none of them specified exactly how to solve it in vite. really appreciate it Sam
Can't thank you enough brother. After almost 4 hours of frustration, got the appropriate solution. Also, CORS package wasn't fulfilling the purpose, as suggested by other channels.
14 seconds of video pointed me into right direction. Thank you! Those CORS configurations are pesky . Local frontend, local backend, GitHub, remote frontend, remote backend, DEV, TEST, PROD - all permutations turn development into a quagmire. Thank you for the explanation.
I needed a solution as fast as possible, I looked a lot of videos that didn't help me, but this one in the first 30 seconds gave me the answer, thank you
Hi, thank you sam for the videos, really amazing content, best practices, great explanation, good energy. I appreciate everything! Here are few tips if you are using the proxy on vite: - after setting up the proxy, make sure you have /api/example endpoints on your server, because if not, when you build your project the http requests will be send to /api/* endpoints and if they don't exist in your server, that will cause an error;
you make videos of things I've wondered about at some point during my learning process, so good! this cors issue was something I fixed using an extension without really paying attentions to the whys and how's
THANK YOU! I was stuck on this for so long. I figured out how to make it work in development but when i had to deploy I could not make it work. When I heard you mention that I can just serve my dist files from my back end, thats when I figured it out. My app now works in prod!
THANKS A LOT!!! (I've been trying to fix this bug for couple of hours, installed nginx, like a billion of cors expansions and set everything on my Flask server... thanks for explaining it all
Thank you so much , you can’t imagine how grateful I am for this clearly instructed solution,I’ve been stuck on this CORS issue for 3 days and went through a lot of solutions and videos but yours is what worked best for me 🙏 thank you again
Thank you for explaining this. I thought we have to use CORS in the backend and the Proxy in the frontend o mmake it work but your video just cleared my doubts
God bless you man!!! Thank you very much for sharing what I was looking for in the first 10 seconds of the video instead of scattering it throughout the video... ❤
Hi Sir. The tutorial is great, but I got catch for the plugin that helps you to complete code, I think you call it Copilot, but I see so many copilot on VS code. Could you be specific which one are you using?
Thanks very much for the video! Got a bit confused why some other tutorials like uploading an image to S3 didn't work for me with the way you did it, but it was because of the missing proxy haha
Hey, really great video that made you gain a subscriber~! I have a question tho, will it work the same way with post request (if we want to gather email from form submission into our server) when in production? I set up a server and in development once i start my server (obv) everything work fine: I'm able to gather info from the input, but what about production if I wanna make it work under the hood constantly? Thank you!
This method only works if you're serving your react app from the same backend that you're making requests to. So you wouldn't be able to do this with a third party API, but those should already have the correct CORS configurations to allow you to make requests.
@@SamMeechWard Thank you so much! Glad to have found your video and it helped me a lot. The only issue I am facing now is that this way, other routes (e.g., /admin) won't work after build - I am seeing "cannot GET /admin" messages. Routing works perfectly fine in development and I am using React Router Dom v. 6. Would you be so kind to explain this or point in the right direction? Thanks again! EDIT: Think I just solved it by adding app.use("/admin", (req, res) => { res.sendFile(path.join(__dirname, "dist/index.html")); }); to my server. Not sure whether this is a correct approach, but it does the trick. Still, Would love to hear how you would solve this. Thanks!
@@kenthugoin order to fix my issue I used the netlify's serverless function to create a proxy (express server through which request is made to the api and then proxy -backend- send the data to the frontend
my frontened is react js and .net core is backend, i hosted backend in server but i didnt able to connect local react to core due cors error, after this video it solved but my question u did chnage on development server.js but i dont have such file where i do the chnages?? also what is express in that command ? help me
The projects I work normally frontend and server are in complete different repos. So the approach in this case would be to add both localhost and production host at server cors config ?
i add proxy on packaj.js and when i run npm start i get this Invalid options object. Dev Server has been initialized using an options object that does not match the API schema. - options.allowedHosts[0] should be a non-empty string. how i can solve it , i spend 3day on it
I have a React js (axios) application on the client side and Node js (express) on the backend. I use aws iis ec2 as my hosting server. All works fine both in development and production, except when I connect to Veepn Chrome (from production) then my token header is not found. I don't use proxy, could this be the issue. I would really appreciate it if you could help me.
note that such a proxy is a trivial Go program. I had ChatGPT write a reverse proxy, and it got it 99% right on the first try. I set env var PUBLIC_URL="." while making a React app, and did this proxying. So I could do hot-editing of the app running at root. And... I could upload another copy of the app anywhere in the tree, and it worked. I am a backend guy, and it drives me nuts when I can't just tar up an app and drop it anywhere into the tree due to urls like "/images/logo.svg" like they own the whole tree. Should be able to upload a list of where the backend endpoints are too. CORS is only about the JavaScript sandbox complaining about code coming from different hosts. And yeah... the whole point of the proxy is to force JavaScript to treat it all as one sandbox.
Thank you for such a clear explanation on CORS and how to resolve related errors. Im facing slighly more issues as I have containerized the frontend react app and backend spring boot api and seeing this CORS errors. I tried to add @CrossOrigin on the spring boot endpoint and also tried to add the serverUrl on the axios.post call. But it is still coming with error like u explained since the ports are different. Both containers are deployed on an EC2 instance using docker-compose remotely. Any recommendation as to how to go about resolving the issue. Much appreciate it.
Config done run on localhost then work. But when deploy to hostname server VPS then not work. It's alway show error CORS. You can help to me root core ?
i'm currently having a nightmare trying to get my vite react app to connect to my laravel project using laravel herd 🤦♂i've added the localhost:5173 to the cors allowed origin array, and i've added the proxy in vite and restarted the dev server... nothing
I am also facing the same issue. My front end is in Next JS and my backend API is on PHP hosted on a remote server. By adding a proxy, it works in localhost, but not working after deployment. It's been a week now since I started finding a solution, but till now, I haven't found any solution. It's frustrating.🥲😬
@@srb.11 one thing I tried and seems to allow my api to connect now, is by passing the "host" property in my vite config file in the server property. I put the host value to the same domain as my laravel api, seems to work. Now I just have issues with certificates because I'm not really sure how to deal with certs properly at the moment
Yes you can, you could use http proxy middleware, or next js rewrites. However, deploying a next app is usually much different than a "traditional" react app and the plan probably won't be to bundle your client side react app with your server like it will with a react app that isn't using next. In next you're probably just going to use the next api or you're going to render your components on the server, or both. If you have another server that you're making API calls to, you might want to go down the CORS rabbit hole, but maybe using a reverse proxy like nginx.
sir, 4 hour,its 8:25AM, i was trying to solve this from around 3:30AM. you cant imagine how happy i am right now to find those 4 line of code in ur first 10 sec of video...... i love you man even turned on bell icon cz u saved my project, i was about to delete it
it took me two days
this is exactly how i feel right now😁😁
Unlike every other youtubers who says bunch of nonsense and non related things before giving the actual information for which we came for, You gave the most important information in the first 10 seconds and proceeded to explain it later. You have our respect.
bro after 2 and a half hours of struggling around , i had lost my hope. and the i decided to watch this full video as my last tether to sanity. and that stupid failed to fetch error is finally gone. thank you dude. god bless you.
This entire list of react focussed videos is great, It is obvious you spent a huge amount of energy on taking us along on the learning curve- just compare the first couple of videos to this, it's a great expansion building on the previous knowledge!
This video really blew me away with the quick deployment on railway, that's awesome.
Also loving the quick snippet at the start showing the main point!
I was so stressed out about the whole CORS issue, and this, this is just gold. Straight and to the point explanation! Really appreciate the work!!!
This clears up a lot for me man. This is the first time I try to make a fullstack app and all these deployment issues are confusing af. Thumbs up for you 👍
I dont really know u and this is my first time of watching ur video but ur video just saved me after 4 days of trying to connect my vite React project with my node js without using cors.......U are a life saver for that am subscribing......thanks again
I never thought that I can solve my intital (proxy setup) and final (deployment) problems by just watching one video.
Spent all day trying different way to deploy my project but lost functionality after deployment. Finally deployed using the process in the video and everything is working sooo fine and it's soo easy. I can't thank you more, u really saved my day here and explanation is on point that made me think like, "what the hell, I understand everything this guy saying" . THANK YOU SO MUCH
Thank you so much for this tutorial, I've searched lots of videos and site but none of them specified exactly how to solve it in vite. really appreciate it Sam
Can't thank you enough brother. After almost 4 hours of frustration, got the appropriate solution. Also, CORS package wasn't fulfilling the purpose, as suggested by other channels.
I spent a whole night trying to circumvent those cors issues. Thank you very much. Now I'll go get some sleep
14 seconds of video pointed me into right direction. Thank you!
Those CORS configurations are pesky . Local frontend, local backend, GitHub, remote frontend, remote backend, DEV, TEST, PROD - all permutations turn development into a quagmire. Thank you for the explanation.
Really awesome video. Telling the solution at start and then it's upto the user to say. Love it man! Hope to see more youtubers be this thoughtful
I needed a solution as fast as possible, I looked a lot of videos that didn't help me, but this one in the first 30 seconds gave me the answer, thank you
I am a bit clueless. But this guy pushed me in the right direction in a way I could understand. Your work is greatly appreciated
If only all tutorials were this thorough.
Thanks for the video
Thank you so much, after a week of search i got my issue fixed and finally the data renders on my frontend up! Keep up the great work! Thank again!
Hi, thank you sam for the videos, really amazing content, best practices, great explanation, good energy. I appreciate everything!
Here are few tips if you are using the proxy on vite:
- after setting up the proxy, make sure you have /api/example endpoints on your server, because if not, when you build your project the http requests will be send to /api/* endpoints and if they don't exist in your server, that will cause an error;
you make videos of things I've wondered about at some point during my learning process, so good! this cors issue was something I fixed using an extension without really paying attentions to the whys and how's
Thank you so much bro for telling the answer in the first 10 seconds. You really are a saviour.
THANK YOU! I was stuck on this for so long. I figured out how to make it work in development but when i had to deploy I could not make it work. When I heard you mention that I can just serve my dist files from my back end, thats when I figured it out. My app now works in prod!
I've been looking for a solution about the proxy in vite-react for days, then this video solved it within 20 seconds. Thanks a lot!
THANKS A LOT!!! (I've been trying to fix this bug for couple of hours, installed nginx, like a billion of cors expansions and set everything on my Flask server... thanks for explaining it all
Thank you so much , you can’t imagine how grateful I am for this clearly instructed solution,I’ve been stuck on this CORS issue for 3 days and went through a lot of solutions and videos but yours is what worked best for me 🙏 thank you again
What a legend , i've been stuck with this for 3 days . it almost seemed impossible to solve then this video showed up when i was just scrolling 😄
sir from past 2 days i spent all midnight just chatgping the proxy thing and today just at 0:13 i got the solution thank you so much
The first video I have ever commented on. CORS was driving me nuts. Thank you!
Thank you! Excellent explanation with real examples. It really helps me to fix my issue and understand the problem.
i literally spent 2 days on cors and hosting but you made it in 15 min thanks man🥺🥺🥺
Just wanted to say this helped me in a bind. Thank you!
Dude, this vid saved my butt.... spent ages trying to solve a proxy issue... Sub'd!
Amazing dude, i was stuck for a whole day figuring out whats wrong.
This video clears all my doubts about proxy server. amazing content!!
thank you for this... I have been searching for this for 4 hours ...
Thank you for explaining this.
I thought we have to use CORS in the backend and the Proxy in the frontend o mmake it work but your video just cleared my doubts
Thanku , after wasted of 2 hours i found the solution of this problem thanku😊
Thank you so much for making this video sir, it actually helped solve and clear the error I was encountering.
Thank you so much sir.
God bless you man!!! Thank you very much for sharing what I was looking for in the first 10 seconds of the video instead of scattering it throughout the video... ❤
I really like this pattern for building full stack react and node applications. Thanks for the video.
Wow, that was fast mate. Thank you Sir :)
Thanks. It saved my 4 hours of headache.
You're a master bro. Keep going ❤
thank you for getting to the point from the start [subbed]
Hi Sir. The tutorial is great, but I got catch for the plugin that helps you to complete code, I think you call it Copilot, but I see so many copilot on VS code. Could you be specific which one are you using?
Thanks you ^^,I find this pbm with my Java Spring api and Vuejs, after your tutorial it's work. Your the best ^^
you are my new God now 😀
Thank you very much Sir for this Important and deep understanding video
Thanks very much for the video! Got a bit confused why some other tutorials like uploading an image to S3 didn't work for me with the way you did it, but it was because of the missing proxy haha
Hey, really great video that made you gain a subscriber~! I have a question tho, will it work the same way with post request (if we want to gather email from form submission into our server) when in production? I set up a server and in development once i start my server (obv) everything work fine: I'm able to gather info from the input, but what about production if I wanna make it work under the hood constantly? Thank you!
wow it was such a amazing video it got my lot of doubts cleared
Grath, a simply solution for the express & proxy develop
Sir, U saved my life 😭😭
which extensions are you using for auto complete? nice explaination btw.
Thank you, Sam, for explaining that we have our own backend, but what about the case in which we are using third-party API?
This method only works if you're serving your react app from the same backend that you're making requests to. So you wouldn't be able to do this with a third party API, but those should already have the correct CORS configurations to allow you to make requests.
@@SamMeechWard The API endpoint I was using didn't have CORS configured so I used a proxy to fix the issue
Thanks
@@SamMeechWard Thank you so much! Glad to have found your video and it helped me a lot. The only issue I am facing now is that this way, other routes (e.g., /admin) won't work after build - I am seeing "cannot GET /admin" messages. Routing works perfectly fine in development and I am using React Router Dom v. 6. Would you be so kind to explain this or point in the right direction? Thanks again!
EDIT: Think I just solved it by adding
app.use("/admin", (req, res) => {
res.sendFile(path.join(__dirname, "dist/index.html"));
});
to my server. Not sure whether this is a correct approach, but it does the trick. Still, Would love to hear how you would solve this. Thanks!
@@mubashirwaheed474 Have you fixed the issue? I have tried using the video's fix but it does not work in Production.
@@kenthugoin order to fix my issue I used the netlify's serverless function to create a proxy (express server through which request is made to the api and then proxy -backend- send the data to the frontend
my frontened is react js and .net core is backend, i hosted backend in server but i didnt able to connect local react to core due cors error, after this video it solved
but my question u did chnage on development server.js but i dont have such file where i do the chnages??
also what is express in that command ?
help me
omg this is amazing XD immediately subscribed!
The projects I work normally frontend and server are in complete different repos. So the approach in this case would be to add both localhost and production host at server cors config ?
Great vids, one thing is there a way to automate the build process?
God Bless You ❤❤❤
should i remove the proxy in prod ?
i add proxy on packaj.js and when i run npm start i get this
Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.
- options.allowedHosts[0] should be a non-empty string. how i can solve it , i spend 3day on it
So proxying like this is perfectly safe to do in deployment?
Incredible video learned a lot
You are a life saver vruhh...
Thank you so much from Pakistan!!
Valuable content, thanks for sharing knowledge!
Thanks man, you save my life.
Excellent explanation
I have a React js (axios) application on the client side and Node js (express) on the backend. I use aws iis ec2 as my hosting server. All works fine both in development and production, except when I connect to Veepn Chrome (from production) then my token header is not found. I don't use proxy, could this be the issue. I would really appreciate it if you could help me.
thanks Mr Sam , this absolutely helpful .
Very clear! Thanks:)
Thank you
it was delighted 🙂
Thank u man so much ....
This vid was a blessing
i am just using normal react app even though i set it is still showing those error i am using vercel to deploy is there is any other way to fix those
Wow I can't ask more than this
why do I need that proxy? why it would not work with localhost. Sorry - I am new in the field.
Waoh thanks for the video Sam 🙌 subscribed 😉
Love you man! Thanks!
Very usefull
Great but doesn't work for POST requests. All Post requests I make is somehow changed to a GET request by the proxy
note that such a proxy is a trivial Go program. I had ChatGPT write a reverse proxy, and it got it 99% right on the first try. I set env var PUBLIC_URL="." while making a React app, and did this proxying. So I could do hot-editing of the app running at root. And... I could upload another copy of the app anywhere in the tree, and it worked. I am a backend guy, and it drives me nuts when I can't just tar up an app and drop it anywhere into the tree due to urls like "/images/logo.svg" like they own the whole tree. Should be able to upload a list of where the backend endpoints are too.
CORS is only about the JavaScript sandbox complaining about code coming from different hosts. And yeah... the whole point of the proxy is to force JavaScript to treat it all as one sandbox.
Thank you for such a clear explanation on CORS and how to resolve related errors. Im facing slighly more issues as I have containerized the frontend react app and backend spring boot api and seeing this CORS errors. I tried to add @CrossOrigin on the spring boot endpoint and also tried to add the serverUrl on the axios.post call. But it is still coming with error like u explained since the ports are different. Both containers are deployed on an EC2 instance using docker-compose remotely. Any recommendation as to how to go about resolving the issue.
Much appreciate it.
Tnks bro its working very well, keep going👍
Config done run on localhost then work. But when deploy to hostname server VPS then not work. It's alway show error CORS. You can help to me root core ?
What would be a suggested way to do this?
I tried Using React Router in this method but if did not work???
i'm currently having a nightmare trying to get my vite react app to connect to my laravel project using laravel herd 🤦♂i've added the localhost:5173 to the cors allowed origin array, and i've added the proxy in vite and restarted the dev server... nothing
I am also facing the same issue. My front end is in Next JS and my backend API is on PHP hosted on a remote server. By adding a proxy, it works in localhost, but not working after deployment. It's been a week now since I started finding a solution, but till now, I haven't found any solution. It's frustrating.🥲😬
@@srb.11 one thing I tried and seems to allow my api to connect now, is by passing the "host" property in my vite config file in the server property. I put the host value to the same domain as my laravel api, seems to work. Now I just have issues with certificates because I'm not really sure how to deal with certs properly at the moment
hi, how can i use 2 proxies in create-react-app?... by the way nice explanation.
great vid 🤌
vite proxy doesn't change axios configuration
Thank you, you have recived my sub and like
Doesn't it support multiple routes in my react app 😭
when im deploying on vercel it does not work
Awesome video!
Thanks a lot, great video :)
Thanks that's a great helpful information
what if you're using remix?
Thanks , so we can create proxy in next js too?
Yes you can, you could use http proxy middleware, or next js rewrites. However, deploying a next app is usually much different than a "traditional" react app and the plan probably won't be to bundle your client side react app with your server like it will with a react app that isn't using next.
In next you're probably just going to use the next api or you're going to render your components on the server, or both. If you have another server that you're making API calls to, you might want to go down the CORS rabbit hole, but maybe using a reverse proxy like nginx.
jeez man, you sure have huge eyes
P.S. Thanks it helped!
Always nice to meet a fan
Thanks I was able to fix a problem with this