Basic authentication making Rest Call via Angular 4 API (CORS Issue)

[LJ]

Hi,

I am making very simlple GET request which requires Basic HTTP Authentication. So following angular tutorials, I created custom header and interceptor to clone request object into new one, add header and forward new object.

Problem.

1. When I tested same, and look at debugger, new header "authorization" is seen in "Access Control Headers" instead of "Request Headers" and I get preflight response error.  Server I make request to, I do not have control on it and it seems authentication is enabled, because I can hit it with browser rest clients (resteasy, postman) with basic auth settings.

2. Then, I tried very similar rest client (on my home computer, just to test) except server url is different this time and looked at debugger, I see "authorization" header added to request headers along with encrypted password.

Can someone explain me or point me to the issues and concepts? Could it be browser differences? I am new to angular and still learning. Also, googling on these issues (CORS, Preflight response etc)  always shows me posts mostly in angular. Is this something angular related and you think moving to other client technology may help?

[Sander Elias]

Hi LJ,

No this is not angular related, and all other frameworks will have the same problem until you fix the CORS issue at your server. postman and resteasy are not the same as a browser. 

Regards

Sander

[LJ]

Thanks Sander.

I was able to fix that issue by making my server call the external API ( not owned by us) instead of having browser making aync call. This issue appears only when browser/ front end makes asynch call.

[Lucas Lacroix]

Hi LJ,
If you're not in control of the API server, then you will need to proxy the requests through your server in order to work around the CORS issue, as you have done. However, that puts unnecessary strain on your server.

The API server should return the appropriate headers so that the browser does not block the request. Maybe you should reach out to the other party to see why they haven't implemented CORS policies correctly. You might also want to check that the OPTIONS requests (these are sent by the browser to get the CORS policies before your request) are making it through - firewalls and proxies can block these unintentionally.

-Luke

--
You received this message because you are subscribed to the Google Groups "Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

Advanced Technology Division, MEDITECH

781-774-2293