Fix CORS errors in Angular (when you have access to API) | QUICK FIX

hey guys I just want to show you how to fix this cause error that appears an angular whenever you try to make a web request it's an annoying error that is very easy to fix the issue isn't with the angular application is with the API or web server you're trying to access within the angular application so I've set up a basic angular app here and all it does is when you load the application it will send a web request to localhost 3000 which we can see here and on localhost 3000 I've got an API running and it's a really simple Express app so it's it's literally just like ten lines of code here and that's my my test a private I've created and whenever I tried to make a web request from angular to this API I get this cause error so the way to fix it is to so the way to fix it is to write some middleware in Express that opens this these headers to the response copy this code here which is just some Express middleware so just copy it and paste it into application into your Express app here and what this does is is it's a pin some headers to the response some cause headers so that it will our applications from other domains or ports to access this API so that's all you have to do save that and I'm gonna i'm going to just rerun this no doubt okay and if we reload this page we don't get the cause errors anymore so the fix to this issue is just to put some code on your API that sets these course headers and I've just shown you have to do in Express but on this site there's lots of examples for lots of different backends so there's a patchy there is meteor there's PHP there's tons of backends that this will work with so just put that code in your API and you'll be able to make angular requests without any issues

Channel: Devstackr

Views: 115,654

Keywords: cors, error, fix, Cross-Origin Request Blocked, CORS header, access-control-allow-origin, access control, allow origin, access control allow origin

Id: Whgr8DKfs6U

Length: 2min 16sec (136 seconds)

Published: Sun Feb 10 2019

Reddit Comments

[u/waschbenzin]

Please don't do this, if you are only struggling with CORS during development using the Angular CLI Server (ng serve). It's better to just use the proxy feature (have a look at https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md ).

[u/Papapac]

This has just nothing to do with Angular...

[u/mr-mercury]

In the future, it would be nice if you explain what the headers do and why the "error" happens and how by adding the headers solves the "error". It is important to know.

[u/BradChesney79]

CORS is a web server security setting that browsers voluntarily abide by.

Does this method get rid of the warning in the browser developer console? Yes it does.

Would learning the proper CORS settings of your chosen web server be better? 10/10 times, yes it would be better to leverage CORS security settings properly.