4

Why can I make a REST API request from a browser/Postman/ even Node.js (http.get method), but not from Angular resource?

The snippet of the error message is:

XMLHttpRequest cannot load http://example-of-external-api-site.com 
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost' is therefore not allowed access.

Before asking this, I tried to look at the definition of CORS. And from my understanding, I can understand why it disallow the request I make from Angular's resource since it is coming from a different domain. But, isn't my browser/Postman/Node.js app are from a different domain as well?

Please help me answering this, I can't really understand why..

Improve this question

1 Answer 1

Reset to default
2

When a request is made from the browser when accessing a url directly, you are requesting the content of a url without the use of XMLHttpRequest.

There are two scenarios for $http.get():

When accessing a uri that is NOT the same domain that is hosting your AngularJS content, via an ajax call utilizing XMLHttpRequest from within the rendered content of your browser, you must provide a CORs header that matches the whitelisting on the target server. This is due to browser security restrictions to prevent nasty, malicious attacks such as Cross Site Scripting.

When accessing a uri that IS the same domain as that which is hosting your AngularJS content (typically done via relative paths: /Api/1 instead of http://domain.com/api/1), CORs whitelisting is not required, since both the origin and the target domain are the same.

Finally, when invoking a url from node, you are making a server to server concurrent call which does not have the same security restrictions since it is not executing within your browser.

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Can you rephrase this paragraph When accessing a uri via $http.get(), you are requesting resources from a domain other than that hosting your AngularJS content, via an ajax call utilizing XMLHttpRequest from within the rendered content of your browser. When you do this, you must provide a CORs header that matches the whitelisting on your server, per browser security restrictions. ? I'm in an assumption that when I do $http.get, I'm requesting resources from a domain that is hosting my AngularJS content.
Your assumption is incorrect, based on the error message that you have posted. You are requesting a resource at http://example-of-external-api-site.com via XMLHttpRequest, hence the CORs issue. You would only be assured of requesting resources from the same domain that is hosting your content if you were always requesting via relative paths.
I understand how the CORS issue exist by requesting a resource to example-of-external-api-site.com via XMLHttpRequest from my domain. What I want to clarify is the wording from a domain other than that hosting your AngularJS content
Sorry, English is my second language, and I think I understand what you are trying to explain.
No problem and my apologies if I haven't clarified properly. Please see my updated answer. I've expanded on my comments.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.