Get Request in Angular js

Question

I'm getting the following error while requesting get method in Angular js

 XMLHttpRequest cannot load http://localhost:29527/Services/ProfileService.svc/ChildList?ParentId=37. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63342' is therefore not allowed access.

This is my code

app.controller("AppCtrl", function($http) {
    var app = this;
    var config = {
        headers: {
            'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',
            'Accept': 'application/json;'

        }
    };

    $http.get(childList,config)
        .success(function(data) {
            var carsFromServer = JSON.parse(data);
            console.log(data.getChildrenResult);
        });
});

Community · Accepted Answer · 2020-06-20 09:12:55Z

Short story

In the beginning websites could load data from another websites. But soon people understood that it's very dangerous, as hackers could steal cookies from other sites. So CORS(Cross-Origin Resource Sharing) standard was introduced, it doesn't allow websites to load data from different domains. But still it can be configured.

Your question

Your url http://localhost:29527/Services/ProfileService.svc/ChildList?ParentId=37 seems a wcf service, which probably is self hosted, but you cannot use it for cross-domain-origin requests, until you implement such functionality as described here and host wcf in webserver. Enabling CORS in wcf sometimes brings lots of troubles, as wcf is very limited by default, even not possible in some conditions. Just because wcf doesn't understand http requests, and cuts a lot of header information. ^{link provided before should temporarily solve, but...!}

Recommendation

Make WebApi site with service references to your wcf service, add everything you need( routes, controllers, actions) and implement CORS there as it's done by applying attributes to the controllers(very easy). So you will end up with 3 projects (wcf service, asp.net webapi, angularjs website). Or better use angularjs backed as webservice of wcf. But having separate webapi server will be flexible, as you might want to make mobile versions, or just mobile native apps, or whatever you want. It will serve everything
^{hope helps. sorry for english}

fdreger · Accepted Answer · 2014-08-12 11:31:03Z

0

It's because http://localhost:29527/Services/ProfileService.svc/ChildList?ParentId=37 Has no Access-Control-Allow-Origin header present. This causes XMLHttpRequest to fail, since origin http://localhost:63342 (where your html is) is not allowed to read data from another origin.

Have you actually looked at the error message?

answered Aug 12, 2014 at 11:31

fdreger

12.6k1 gold badge38 silver badges46 bronze badges

4 Comments

user12378334 Over a year ago

I tried with this headers:{'Access-Control-Allow-Origin': '*'} but it didn't make any changes

Chris Over a year ago

Raghu, did you try setting 'Access-Control-Allow-Origin': '*' on your localhost server which is serving up your API? That's the side of the coin which you need to be working with. The accepting server needs to allow cross origin resource sharing.

fdreger Over a year ago

not really surprising. Read the message again - it is about the resource, not the request.

fdreger Over a year ago

please, read up on same origin policy. By doing this the wrong way, you might introduce a MAJOR security hole.

mapa0402 · Accepted Answer · 2015-02-02 19:54:43Z

0

Try with $http.jsonp instead of $http.get check out https://docs.angularjs.org/api/ng/service/$http#jsonp

answered Feb 2, 2015 at 19:54

mapa0402

4841 gold badge8 silver badges25 bronze badges

Collectives™ on Stack Overflow

Get Request in Angular js

3 Answers 3

Short story

Your question

Recommendation

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Short story

Your question

Recommendation

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related