Fix CORS Error [SOLVED] | React Tutorial

hi guys welcome back to another video so in this video it'll be different from previous videos so in this video I'll be showing you how to solve the issue of cost issue as seen here so in this video I'll do the demonstration on using this how to solve the issue on react and we will look into this right now so as you can see here this is the arrow that you can actually see it while you're doing the inspections and inside the consult so it would say something like this is like the link in the API link that you request to and then this is the original link which is the one that you work on the localhost and has been blocked by the COR cost policy which it says no access control our origin header is presented on the requested resource so this is the issue that you get and the API that you're actually working on you try to request actually not working because of this issue and this is another example of this is the API that you try to request to and from the origin which we are working on right now has been blocked by this again no header is presented on requested resource if an opaque resource service unit and then it says like we need to set the mode to no cost to fix the resource with this cos visible but it's not that simple for as you can see in C from here also this is an array is an upper which is similar to the first to no sauce presented on the requested resource and the pre-flight request doesn't pass the access control checked so this is just three example that you might actually get from trying to hit the server or try to consume the API from the code that you are actually working on now so how can we actually solve it right now you can have a look here so it's quite websites that I have open but we'll look into this in detail and we try to understand what actually the issue is and what it costs and how to actually solve it so now before getting into how to solve it we just read a little bit of this to see what people actually facings and how can they actually solve it or whether they are still facing the same issue so now let's have a look at the comment of this page and here you can see that people try to make a request using this is the Axios and they try to put the header of this access us in here but then this where the person still receive the following arrow which is the same one as I just previously show you so people are asking for help in this case before try to also use the proxy inside this X cos not yet but still they still get the same issue so now here we can have a look people having a lot of this issue because of this cost issue and this is people trying to say cross arching but you can see the summer are the sum down so which means that is involved at all and here once there are more right here so people try to do it and you see Express this might work before asking in 2018 now any updates and the s also want require one solution as we also say if you are using a public API then there should be fine if you can see that issue what you need to do is that you can just try to copy this link and then put whatever the API link with the public one behind this and it should actually will find because the reason is that when we try to hit this API and then it going to go through this and it tried to at the end about the cost for you automatically so you don't need to worry about this but the reason is that when you try to use your company API or the word with the private that is inside the in Stinnett not really like a public that no one can access from the outside of your company then that sooner saw the issue of using this so we will look into how to solve that in a minute so here this guy says that because some we actually like having self-driving car and AI but still secondly with this and but yeah it's people still struggling with this actually so just make some funny comment here and asking for any updates all right so you can see that a lot of people are having this issue and I also common as well so say I'll create video on how to fix this issue and I'll update this comment on the video that I'm right now recording and you guys can actually go to this link and see what is update here alright so now it's time to understand a little bit of what is cost so it's been for the cross-origin resource sharing that antibody stole the HTTP header to tell the browser that it runs from one or reaching of one domain and have permission to they select a resource from a server from the different reach in so this is an example of how make quests and then why this happen and stuff so you can have read more in detail in this article and because re just from the first page I already spent like six minutes so quickly go through one by one here so this is how to avoid a cost for in react apps which is the one that we are actually looking into so this is the problem that having tried to send requests to the server and then roof back and we will see what causes that but for now this is the solution here for the solution so the first one is that if you try to a send authorization headers and then better conflict so set the server up and it responds with the option of this which include the access control header inside that there should be one of the the the solution the first solution is the problem number two and then how can we actually do it and is the third one we can actually use the plug-in which is on the access control your gene chrome so when you try to add about this that should also fix the problem but it's the reason is that if you use the plug-in it doesn't solve the issue for the other users say you have lot of user using your website and they of course experience this unless they have to install this plug-in one by one for each or all users and this is the solution number four you can actually use the proxy try to set the proxy inside your react app but when we try to use the proxy for this react app inside this package to chasten it only works one for one API only but say you have five or ten API that you need to request to then this should not be the right solution for you so next one here again try to add the header also this is the just to make it aníbal the cost inside your server in this case people are using index dot PHP so this is the server-side next one here is the cost again if you are used the Express inside Express respect and inside your react then this would be the one that you need you are looking for so again a little bit of the explanation of the cost issue again so when you try to hit team the server from the locally so far so say this is the father you are working on and then you try to hit the one coming from here then you might experience this issue also this is your app and try to have another one which is different URL as you can see here this is the external APR is the internal one also it can be caused by some time in this case this one that I want to show you as well so say we are working on the HTTP but then we try to request it to the HTTPS which is different domain then you can also having this issue so this is another one which is hitting the different port from the same host and we could also having these issues well so how to fix it then we need to add about this inside the header but again this is for the express ask the back end if you are using this for your app and if so you can just do using this library the Express this is the back end is the library the cost and this is how you enter it inside your react with the Express but the one that I'm going to show you is that we done use the Express as the back end and the pure react application so then how we're going to do it we'll look into it in a minute and this is another solution that people suggest so adding this inside option route to access the API and here again you can see that this is people using Express so that's why this should be the solution but if not then we'll look into more again this is another one which is antibody header error in d HC us and so here I found that is a little bit useful information so this is actually a response header so in order to enable the cost you will need to add this headed to the response from the server if your server does in half or an abode this then even though when you try to request it from the xes adding the header to your react code then it still doesn't work because of your server doesn't support the X the cost so next one here this another temporary solution I would say so we can also use this or run the Chrome Google Chrome this is the browser which you can see here so so you can disable the security inside say in this case you are using Windows so you can just follow all these steps to disable the SiC web security then you can actually do all your testing running to see if the all of the API so this is the temporarily resolution and if you are using Mac Book in this case Mac OS then you can just open your terminal and then run this command or in case you are using Linux then you can disable by doing running this comment so this is the temporary resolution in case you are still in the testing phase or in the development phase then you can just use this so next one here is using the API requests in the development so again this is the solution by using the proxy by bypass the proxy this is inside your package rotation and you just add this line of code and this is suppose you are using the API link that you can just put it here then you might also this is how to do it manually but for using this the you can see HTTP proxy media and by doing or using this library then you can actually use to bypass the API more than two so if you are using the package Jason then it works only for one API then if you are using this library then it can be more than two so this is how you do it like you don't need to report this a anything and then you can just need to try to create so we will look into this how to actually install this and bypass the proxy or to solve the issue of the cost and this is the solution that we are going to use so here before getting into that solution again I'll show you a little bit so we can actually try to end of all that cost inside say if you are using nginx as your server then this also could be your solution as well like doing these things these the configurations for your cost for your nginx server and this is a list of the server that you can actually use from so in case you are using the Express das you can look into this and this is the nginx so I'll try to open one of this so Express using the Express then this should look something like this and again this is another one which how to actually show you how to do the proxy so from the office of website it show you a little bit but not in detail and this example little bit clearer by doing this proxy just adding inside your package JSON and then inside your application you can use this so this is the URL slash something with thee at this so you don't need to input the header right here so just slashed something and then it will ultimately call this proxy and this is another wonder link because in react apps so it is the problem or the proxy so D is the manual one which the same using this but in this example it's not quite clear ask you how to soul it so again I'll show you how to do it and this is a little bit of the other api's that say if you want to actually try to use this you can come to this website and have a look is all the public API that you can actually use for the testing purpose and in this example I will be using D Jason placeholder slash user as an example using this even though this doesn't have the issue of the cost but I don't have any specific API for to show you like the cost issue so I think using this public API for the showing you how to do it how to sort issue so before getting into all of those things again I just want to emphasize that if you are experienced all of those things you try to use the Axios while your server is an export the cost or by enabling the cost on your server side then you face that issue or if you are using try any of the solution that i mentioned above doesn't work then this should be the solution that you are looking for right now so i'll show you how it actually worked before getting into those again for this I'll be using the postman for you to just to show you what it look like say if you are trying to hit the server this is just for testing to see if it's actually working so in this case it's worked fine but and also the s1 option as well so here in the setting so you can see that this is the Hess SL certificate verification is actually turn on but in case you are using the brytewave API or your company API then when you try to actually enable this and when you try to click on the send button then if you in case you facing the error then what you need to do you need to go to the setting again and then try to turn it off and try to hit it again so this could also be a problem as well but it even though it's not like cause but yeah again it relatable so say if you don't have the postman then how can you actually test if it's actually working or not again you can just come to the web go to this browser and then just try to hit it or you can open your terminal by typing C URL and then try to hit this so this should also give you the result in the chase and file as well and again if you try to do it and it still doesn't work then you might considering about the SSL and also I show you a little bit of the postman how actually can you test for the SSL with your it support or not and also there could also be other issue as well for say even though we when you try to change the port so by default for the react its localhost 3000 but then if you try to say right now your is in I already show you like HTTP then you try to make a request to HTTPS then you might also thinking maybe you can sustain the HTTP on react to HTTPS so that you can actually try to make a request or you try to change the port to say three thousand to three thousand one or two 8080 port then if you still experience all of this issue then again this is how I show you all right so now let have a look into the code and how can we actually solve this issue so first of all I'm gonna show you how to bypass the proxy but I only say you in your application you only consume one REST API so for the purpose of having say just one API then what you can do you can just go to the package.json without installing a new dependency or a lude new library but for this just one then what you can do you can just type a proxy and then right here what you need to do you need to cut the front bit here so this is what you need to do just cut the front bit and save it right here again save this file by then you need to restart your application again and in venom see the result all right so here's the result this is how you bypass one proxy so if you experience the cost issue when you seem just one API then this would be the solution for you otherwise if he's using more than two REST API at the endpoint then you need to consider using this library that I'm gonna show you right now so as mentioned earlier I use this user rather than just photo and this is what I change from photos to user and I show the username and use a full name so here's the result of username and the full name of the user so now I'm going to show you the library that I'm going to install so here's the library that I mentioned about which is the HTTP proxy midoriya and you can see that this is quite useful almost five millions download already and it can also be used with the Express if you are using the Express as your back-end and this is how it can be done but if you don't use the Express then I'll show you how to do it now just copy this paste it here inside your project elect drive tree so the library now has been installed and see you got in a minute I'll type in all the code that required and show you in a minute and this is how you set it up so first you need to create a file inside the folder in this case the inside the source folder so what you need to do you type out the setup and proxy dot J's you remove it to give it a name as this so this is small letter and paste the capital letter and type out all these code is what the code that you need to make the bypass the proxy works so right here inside this double quotes you need to do slash user which is the same as this and the target right here which is coming from the one that we just added right here in the proxy so in this case you don't need this anymore because we are now using the library so cut it and paste it right here and save it so to make this up and running you need to go through the terminal and start running this again so this is how it works alright so as you can see this is exactly the same as the previous one but right now I'm going to show you how to create like a double one and this is how you do it just copy this link and paste it here and then this would be your second API so this would be the different link and it is also based on whatever that behind this front URL and one things to note is that right here say in case you want to try to this aboard SSL as I show you on inside the postman so if you have turned the SSA on and you cannot get resolved so you can try another option which is try to disable the secure or the SSL by use in something like this so secure false so this is how you turn it off and to get the results that you actually want and for the change origin by doing this it tried to change the original one to the one that we are now using which is the localhost and this is how you do it so secure it depends on the API you can try to check if this does work or not and if it doesn't actually require then you can just leave it off you don't need to tightly secure that off and I'll might try another API to show you how this can actually be done and how it works all right so now for the demonstration of using two api's in the application I use this free API so this is the talk API so this is the API at the endpoint that is look like so when I try to click on this button you will see that there will be a image that randomly render so this is the image of the door and the response would be message with the URL of that image and so right here I have already implemented that so I use again with the 8x EOS and in this case I have commented out by using the one API that we call previously so in this case I used to which is the one with the again with the same one with the user and the other one which is coming from here so here is the URL of that and again with the proxy I create two so this is the previous one and this is the new one and you can see that it's slots API and in case so this is the API in case we are having the same one which is the same as API right here then what you can do in this case we have more than this so we can just copy after need that so just to make it unique and again for these things it's should be the same right here so this is how we actually used to API in case we have the same dust API or something here right here and for now this is the ACO spread we try to spread to which is the first one is the user and this is the response of the second one which is the response dog and we call it the data coming from this API and restored inside the wearable all the users and otherwise is the second one we store it inside the set dots dogs so underneath this so this is the dogs dot message the reason is that it doesn't like provide all of the loops throughout the function so what it does it just try to give me a response back with d1 uol only that's why I just put it underneath this without using the dot map function and this is the URL of the doc response and this is I render this dog image on the browser so now let have a look on it so this is what it look like so we have got two API this is the one APN and this is the other API and when I try to refresh this you will see that this is another image of the dog so again look something like this and when I try to refresh more you will get another dog image so this is how we actually implement using to proxy in this case to proxy inside one application by bypassing that cause issue how to solve the cost issue by using this and this is quite useful you guys can follow all of this just through all this code and create this file then we can actually solve the issue of the cost by doing all of the things again thank you so much for your time and see you guys in the next video you [Music]

Channel: Hong Ly Tech

Views: 223,155

Keywords: fix cors issue, reactjs, react tutorial, cors, fix cors, fix cors error, solve cors, react cors issue, react cors proxy, react cors error, cors in reactjs, enable cors in reactjs

Id: hxyp_LkKDdk

Length: 29min 46sec (1786 seconds)

Published: Sat Sep 07 2019