401 Unauthorized error when accessing webapi from angular

Question

I need to capture a user's domain\username when they access my webapi app. On my dev machine I have my webapi at localhost:10570 and my angularjs website which makes calls to the webservice at localhost:34575.

If I make a call directly to my webapi app everything works fine. I can see the users domain and username and the service returns the requested data as JSON. But if I access my angularjs site and angular makes the call to webapi then I get 401 unauthorized for every call against the service.

In my WebApi app's web.config I have:

<system.web>
    <compilation debug="true" targetFramework="4.5.2" />
    <httpRuntime targetFramework="4.5.2" />
    <authentication mode="Windows" />
  </system.web>
  <system.webServer>
    <httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:34575" />
    <add name="Access-Control-Allow-Methods" value="POST, PUT, DELETE, GET, OPTIONS" />
    <add name="Access-Control-Allow-Headers" value="content-Type, accept, origin, X-Requested-With, Authorization, name" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</system.webServer>

I have this in IIS Express for Visual Studio 2015's applicationhost.config file:

<location path="MyNamespace.WebAPI">
    <system.webServer>
        <security>
            <authentication>
                <windowsAuthentication enabled="true" />
                <anonymousAuthentication enabled="false" />
            </authentication>
        </security>
    </system.webServer>
</location>

My angularjs site is part of the same solution at "MyNamespace.Client".

Why does accessing the web service directly work fine, but accessing it via the angular app fail?

You need use Bearer Token. See bitoftech.net/2014/06/09/…, dotnetcurry.com/aspnet/1223/… and c-sharpcorner.com/UploadFile/ff2f08/… — George Paoli
– George Paoli, Commented Aug 26, 2016 at 22:14
@gpaoli Luckily bearer tokens weren't necessary in this instance. Looks like a lot of work. — Legion
– Legion, Commented Aug 30, 2016 at 16:24

Legion · Accepted Answer · 2016-08-30 16:23:39Z

17

I didn't realize you have to tell Angular to send your credentials to the server. I just had to change my API calls from:

$http.get(url);

to

$http.get(url, { withCredentials: true });

answered Aug 30, 2016 at 16:23

Legion

3,5299 gold badges60 silver badges111 bronze badges

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

7 Comments

Sonic Soul Over a year ago

hmm that gives me a different error: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. but when i remove it I get: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Legion Over a year ago

@SonicSoul That looks like a CORS error. If your angular app is backed by a web service and they're on separate domains or the same domain with different ports you'll have to use CORS. Perhaps it's not configured correctly? If this is .NET, the settings will be in your web.config.

Sonic Soul Over a year ago

yep, the wildcard in question is in the web.config. I've gotten to a point where i can get all get's to work but not the put's ..

Legion Over a year ago

@SonicSoul Are you using Chrome? Chrome has issues with CORS and sites hosted on localhost. So if your web service is at localhost:1234 and your angular site is at localhost:9876, anything other than GET requests will be problematic. Try in IE and see what happens.

Nez Over a year ago

OMG! I've been frustrated looking for 10 hours straight today looking for this answer! Thank you soooo much! You just gave me a progasm! --even if this post was 7 years ago! It still applies to Angular 18! Weeeeeeeee!

|

Collectives™ on Stack Overflow

401 Unauthorized error when accessing webapi from angular

1 Answer 1

7 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Linked

Related