Making an API call from browser works, but not from front end app

Question

I have two separate projects: a front end app (Angular 2, using Visual Studio Code) and a back end app (ASP.NET Core, using Visual Studio 2015). For the back end app, when I did File > New Project, I selected "Windows Authentication."

Under Properties, I have these boxes checked:

When I make a call to this API from my browser, it works just fine:

        // GET: api/card
        [HttpGet]
        [Authorize(Roles = ActiveDirectory.User)]
        public Card[] Get()
        {
            var cards = _cardData.GetAll().ToList();

            var result = cards
                            .OrderByDescending(x => x.LastChanged);

            return result.ToArray();
        }

But when I make a call from the front end app, I get a 401 error:

    private _cardUrl = 'http://localhost:8462/api/card';

    getCards(): Observable<Card[]> {
        return this._http.get(this._cardUrl)
            .map((response: Response) => <Card[]>response.json())
            .catch(this.handleError);
    }

I should point out that when I remove this line, it works just fine: [Authorize(Roles = ActiveDirectory.User)]

I am definitely a member of this role, it just isn't recognizing it when I make the call from the front end app like it does when I make the call from my browser.

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

Are your projects deployed to different domains? (http://localhost:8462 and http://localhost are considered different domains)

If yes, you have to add withCredentials: true to your Angular2 HTTP backend.

See also: angular2 xhrfields withcredentials true

edited May 23 '17 at 11:54

Community

1
1

answered May 21 '16 at 05:27

Alex Lau

1,687
10
17

Yes, the back end app is on http://localhost:8462 and the front end app is on http://localhost:3000. – Derek May 21 '16 at 07:09
Then you must add `withCredentials` otherwise browsers will not send any credential information over XHR. – Alex Lau May 21 '16 at 07:11

score 0 · Accepted Answer · answered May 26 '16 at 21:33

Added this to front end app: https://github.com/angular/http/issues/65#issuecomment-181560171

Add this to back end app in Startup.cs:

app.UseCors(builder =>
            builder.AllowAnyOrigin()
                    .AllowCredentials()
                    .AllowAnyHeader()
                    .AllowAnyMethod()
            );

Making an API call from browser works, but not from front end app

2 Answers2