How To Solve Any CORS Error

hey guys how's it going I'm back here with another video and today I decided to make this video because I know for a fact a lot of you guys are watching this video because you just run into an error related to course and you don't know how to resolve it so I decided to make this video in order to finally explain what exactly is course and how to resolve issues whenever you encounter them [Music] [Applause] [Music] [Applause] before we get into the video this video is sponsored by skillshare as many of you might know skillshare is an online learning community with thousands of inspiring classes for anyone who loves learning they have courses on a multitude of topics such as react typescript node.js and much more a course that I took and I really liked was the modern CSS writing better cleaner more scalable code course by Harry Roberts CSS is definitely one of my weak points in web development and this course helped me find a better approach to learning the technology one of the best aspects of skillshare is that it is curated specifically for learning meaning that there are no ads and they're always launching your premium classes so that you can stay focused and learn as many skills as you desire in 2022 the first a thousand of my subscribers that click the link in the description will get a month free trial of skillshare so you can start exploring your creativity today okay so like I said if you are a web developer you probably ran into an issue related to course probably seen an error message like this one appearing in the screen so in order to explain to you guys how to fix such errors I need to explain to you guys what exactly course is so first of all course stands for cross origin resource sharing which basically means that it is a mechanism that allows the server to specify which Origins it allows to have access to its Pages now I know that sounds kind of a formal definition but at the same time I'm going to dissect what exactly that means so basically imagine you have two websites right you have site 8 and you have site B now imagine site a would be a front end right a front end for an application something like a react app site B would be the server for that react application so it's a full stack app right so server B is going to be receiving requests from the site a right but the thing is site B should not by default be allowed to receive requests and return responses to any website in the internet the reason for that is because it would just be insecure right we don't want malicious websites to be able to fetch data from our server because especially when our server is handling sensitive information such as passwords banking information maybe like the cookies tokens related to a user authentication that kind of stuff so for that reason our server or any other server that we're creating should specify who can fetch data from them that means that if you ever see this error over here which is the most common course error out there what it's basically saying is that you have to specify which Origins are allowed to fetch data from the current server now what do I mean by origin first of all when I say origin I mean something like the domain of a website or the port depending on if you're hosting your project live or if you're hosting it in your own computer doesn't matter you have to specify no matter what and this error message specifically mentions something called the access control allow origin header so what this is is a header that is put in the response from an API request for example and it specifies which origins or in this case which front-end domains are allowed to fetch data from the server so what happens is we have the front end right the front end will make the request to the API the API will send back some data when that request and the response technically under the API is sending back to the front end it will send back as well um the a header right and that header specifically can specify which domains are allowed to make the requests so course is something that is acted on the browser meaning that when the browser receives the response from the API it will check to see if the header with the key access control allow origin has the value which matches the actual domain of the front end and if it does it will allow the request to be completed if it doesn't it will block the request and that's why sometimes you might see that the request was blocked by course but the request when you check it on the request tab in your browser it seems to be successful because what happens is it's blocked by the browser and not by your backend or Not by your front end it's all blocked by the browser now does that mean that you have to make changes to fix it in your front end well no that's actually the opposite a lot of people think that the changes you need to make to solve a course issue is in the front end but it's actually in the backend so when you send back the response to your front end you need to add a header which is the access control allow origin header and set your front-end domain to be the value of it you might see a lot of examples online using a wild card or an Asterix as the value for that header that basically just means that you're allowing any domain to make the request which is not secure so I wouldn't recommend doing that unless it's a very personal project and you don't care about security I would definitely recommend just specifying which domain you own for your front end so that you prevent your API from being open to everyone now I'm going to show you guys a simple example over here it's probably showing in the screen right now um of how to solve this using something like node.js and express um because what you have to do is you have to specify for every request right but that doesn't seem very um fun to do it seems boring to go to every response in your API and including the fact that you're allowing your front-end um to to fetch the data so what you can do is you can create a middleware that will exist for the sole purpose of adding that header and you can really easily do that in node.js already and you've probably seen this before by installing the course module and just applying it by saying app.use and what that will do is just add that middleware to every endpoint you have in your API meaning that it will solve all the issues so the main takeaway of this video in my opinion is understanding that course is something that is there to help you it's there to make your website more secure and understanding it isn't that hard also it is important to understand that it isn't a front-end fix it is a back-end fix and it is something that is enforced in your browser and not in your API or your front end now if your error message is a little bit different from the one I showed it's still fine most cores problems are almost the same so what I would recommend is first of all um trying to understand exactly what I what I taught in this video and that should be enough for you to resolve most course issues but also going to the specific technology you're learning and reading the course documentation for that technology meaning that if you're using node.js I can put it on the screen right now this is the course documentation for using it with express it explains a lot it also specifies a lot of stuff which is really cool and I would definitely recommend just taking a look at it now if you have any questions just leave a comment down below I really like this topic because I remember um not knowing how to solve those issues and just going to stack Overflow copy and pasting some solution and being fine with it which I don't think is the correct approach to programming in general Arrow so if you have any questions just leave the comment down below and I'll answer it if you liked the video just leave a like And subscribe I would massively appreciate it it will help push my videos more people and I'll be really grateful if you could do that and yeah that's that's basically it again thank you skillshare for sponsoring this video and I see you guys next time [Music] [Applause] [Music] [Applause] [Music] [Applause] [Music]

Channel: PedroTech

Views: 27,738

Keywords: computer science, crud, css, databases, javascript, learn reactjs, mysql, nodejs, programming, react tutorial, reactjs, reactjs beginner, reactjs tutorial, typescript, react js crash course, react js, node js, express js, pedrotech, traversy media, traversymedia, clever programmer, tech with tim, freecodecamp, deved, pedro tech, cors, cors error, how to solve cors issue, cors issue, cors error in react js, what is cors, cors tutorial, cross origin resource sharing, cors policy

Id: qnA_h_PzJD0

Length: 8min 2sec (482 seconds)

Published: Tue Sep 13 2022