Accessing data from private API (with Basic Auth credentials) using Angular JS

Question

I have been tasked with connecting an existing Angularjs app to a third party service via API using Basic Auth credentials I got from the third party website. I am not as experienced with Angular and APIs as I would like, although I am familiar enough that I can research and find my own solutions.

I've created a local copy of the app to my computer and have successfully connected the application to another API that needs no authentication (JSONplaceholder), but once I switched to testing the private API I am running into 401 errors with the following:

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've been researching the problem for a couple of days and I believe the problem is probably due to me trying to access the data from localhost. I'm not finding a lot of documented cases out there that discuss using Angular's ngResource/$http to connect to a protected third party API using Basic Auth so I am starting to wonder if I am barking up the wrong tree with my approach.

I am currently part of a two man development team with no senior or lead dev in charge, I have not had much success in finding the right direction to take this project so I would appreciate any assistance with the following question.

Why is the data from JSONplaceholder accessible from localhost without a problem but the a call to the private API throw 401 erros? (Even with credentials in the header). Aren't both cross origin Requests?

Answer 1

I'm assuming you're doing a GET request to the private API.

What you've ran into is CORS protection and it's implemented by the browser for safety reasons, which you probably know now after your days of research :)

Anyway, the JSONplaceholder API likely has a * in their response for access control rights, which you should be able to verify by manually constructing your http request with something like Fiddler or cURL. A star means "Every one is allowed cross-access to this resource". And it would seem that the private API does not enforce this - however, it should still work if you run it from localhost, as the browser most often ignores CORS-issues from localhost. You are serving it through a webserver and not directly from your filesystem, right? (http:// vs. file://).

You should contact the private API owners about how their prefer you access their API. If out of luck, you need to use a CORS proxy serverside, or see if they serve jsonp (Although I would never recommend jsonp - again, security :) ).

I've done an answer pretty similar to what I think you need to be doing here: Attempting to make a Cross Domain AJAX request to a Server I don't own - I hope it will be helpful.

EDIT; from comments:

Our app communicates with a PHP based API that fetches data from client's websites. Would this be considered 'Build or install your own CORS proxy that you trust' like you mentioned in the other question

Nope. Your app runs in the browser. The browser enforces a security model to avoid cross-site gets from other than the hosting domain. To disable this, the target server needs to tell you that it's okay to do so. However, you can avoid this by 'CORS proxy'ing', which basically mean that instead of sending a GET request to the target server from the browser, you send a GET request from the browser to you own server, which will then relay the GET request to the target server, so your server effectively acts as a proxy. With this approach, the browser will only send GET requests to your HTTP-server, and your server will always be trusted by the browser, since it's also what served your 'app' in the first place.