Making an API call from browser works, but not from front end app
<p>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."</p>

<p>Under Properties, I have these boxes checked:</p>

<p><a href="https://i.stack.imgur.com/k56rq.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k56rq.png" alt="enter image description here"></a></p>

<p>When I make a call to this API from my <strong>browser</strong>, it works just fine:</p>

<p><a href="https://i.stack.imgur.com/kf1Cn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kf1Cn.png" alt="enter image description here"></a></p>

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

            var result = cards
                            .OrderByDescending(x =&gt; x.LastChanged);

            return result.ToArray();
        }
</code></pre>

<p>But when I make a call from the <strong>front end app</strong>, I get a 401 error: </p>

<p><a href="https://i.stack.imgur.com/xOpm8.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/xOpm8.png" alt="enter image description here"></a></p>

<pre><code>    private _cardUrl = 'http://localhost:8462/api/card';

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

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

<p>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.</p>