Understanding CORS

Key Takeaways

All right, so let's go over cores or cross origin resource sharing. And basically, your browser is blocking requests between different domains. And it's a security thing, so there's good reason for it. Now, I have an example HTML file with some front-end JavaScript, and I'm trying to hit my Express API on localhost 8000. Now when I click the button and make that request, I get an an error in the console that says it's being blocked by a course policy and it says no access control allow origin header is present on the requested resource. Now this header is what tells the browser, hey it's okay to make requests from other domains. Without it, the browser blocks that request. So your API is probably working fine. If you test the same endpoint in Postman or curl, it probably works perfectly. That's because corores is a browser security feature and it only affects requests made from web pages, not direct HTTP clients. So the fix is simple. We need to add that missing header to our express server to tell the browser that we're okay with cross origin requests. And there's a few ways to do this. You can do it manually by adding your own middleware function where you set a few different headers. So the the main one being access control allow origin. And you can set that to anything including an asterisk which will allow from any domain. Then you have access control allow methods where you can set what methods you want. Get, pose, put, delete. And then you have access control allow headers and this specifies which headers the front end can send. And content type is a super common one because we need that when sending JSON data. So if you try it again, you should get no more cause