Angular 2 app: "XMLHttpRequest cannot load localhost endpoint"

Question

I have my Angular front-end set up to try and hit a RESTful endpoint. The Angular front-end is being served on localhost:3000, and the RESTful back-end is being hosted on localhost:8080.

In my Angular rest client service, I make the call (which I subscribe to elsewhere in my application):

getCurrentSlides(): Observable<Slide[]> {
  return this.http.get("localhost:8080/app/slides")
     .map(extractData)
     .catch(handleError);
}

But when Angular tries to hit that URL, I get the following error:

XMLHttpRequest cannot load localhost:8080/app/slides. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

And yes, CORS is enabled on my server.

Possible duplicate of [How to create cross-domain request (Angular 2)?](https://stackoverflow.com/questions/34790051/how-to-create-cross-domain-request-angular-2) — eko, May 25 '17 at 10:13

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

1

this.http.get("localhost:8080/app/slides")

You're missing the http:// in the URL. With that, most browsers will still require CORS for the different ports, but IE does not, so when adding http:// you should be able to test using IE:

IE Exceptions

Internet Explorer has two major exceptions when it comes to same origin policy

Trust Zones: if both domains are in highly trusted zone e.g, corporate domains, then the same origin limitations are not applied

Port: IE doesn't include port into Same Origin components, therefore http://company.com:81/index.html and http://company.com/index.html are considered from same origin and no restrictions are applied.

These exceptions are non-standard and not supported in any other browser but would be helpful if developing an app for Windows RT (or) IE based web application.

That said, you should enable CORS. (But it seems you did, so then it's just the missing http:// prefix.)

edited Jun 20 '20 at 09:12

Community

1
1

answered May 25 '17 at 11:59

Arjan

22,808
11
61
71

@David that changed the original question into a Java Spring question; we're not a forum but a Q&A, so please don't do that. – Arjan May 25 '17 at 12:20
I see - I was hoping the OPTIONS was something I would configure within the Angular project. If that's not the case, should I start a new question and close this one? – David May 25 '17 at 12:31
1

I was able to find my answer in a Spring post elsewhere, as you suggested. I'm going to mark your response as the answer, since you solved the Angular half of the puzzle for me (which I originally thought was the only puzzle to be solved). I have also removed all references to Spring in this post, so it's more useful when people find it in the future. Thanks for your input. – David May 25 '17 at 12:59

Angular 2 app: "XMLHttpRequest cannot load localhost endpoint"

1 Answers1