Databases
StackOverflow2013
Postsdbo
POCORS - Ajax error function reports error code as 0 for an API request returning 401
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POCORS - Ajax error function reports error code as 0 for an API request returning 401
    text
    copied!<h2>Background</h2> <p>I have CORS working in my local dev environment when authentication (JWT) succeeds. I have the client page running off of localhost and calling into api.mycompany.com for data. My api project checks for a valid JWT, and if it passes, returns the content. It took me a while to get here, but this all works fine. </p> <p>If I do not send a valid JWT, the api responds properly with a 401 (checked this in Fiddler), but the error function callback on the client reports an error code of 0 and a status of "error".</p> <p>I want the ajax callback function to check the status code of the error and if it is 401, check the headers for a header named location (which will contain the uri to the authentication service).</p> <h2>Setup</h2> <ul> <li><p>(API Project) Visual Studio 2012 instance running MVC4 project on local IIS Express</p> <ul> <li>Local host file maps 127.0.0.1 to api.mycompany.com</li> <li>Set Project -> Properties -> Web to IIS Express <ul> <li>Use Local IIS Express (checked)</li> <li>Project Url: <code>http://localhost:8080</code></li> <li>Created Virtual Directory</li> <li>Override application root URL (checked)</li> <li>Override application root URL: <code>http://api.mycompany.com:8080</code></li> </ul></li> <li><p>In applicationhost.config under sites:</p> <pre><code>&lt;site name="StuffManagerAPI" id="1"&gt; &lt;application path="/" applicationPool="Clr4IntegratedAppPool"&gt; &lt;virtualDirectory path="/" physicalPath="C:\Users\me\Documents\Visual Studio 2012\Projects\StuffManagerAPI\StuffManagerAPI" /&gt; &lt;/application&gt; &lt;bindings&gt; &lt;binding protocol="http" bindingInformation="*:8080:localhost" /&gt; &lt;binding protocol="http" bindingInformation="*:8080:api.mycompany.com" /&gt; &lt;/bindings&gt; &lt;/site&gt; </code></pre></li> </ul></li> <li><p>(Client Project) Separate Visual Studio Instance with ASP.net empty web application</p> <ul> <li>Set Project -> Properties -> Web to IIS Express <ul> <li>Use Local IIS Express (checked)</li> <li>Project Url: <code>http://localhost:22628</code></li> <li>Created Virtual Directory</li> </ul></li> </ul></li> <li><p>Using Google Chrome as the test client</p></li> <li><p>Using Fiddler to view traffic</p></li> </ul> <h2>Code</h2> <p>I think these should be the important bits from my Proof of Concept. Once again, the CORS preflight and data retrieval all work fine. It's just the unauthorized case that is not working. If you need anything else, please let me know. Thanks for the help.</p> <h3>API Project</h3> <p><strong>Authorization Header Handler</strong></p> <pre><code>using System.Collections.Generic; using System.Linq; using System.Net; using System.Net.Http; using System.Threading.Tasks; namespace StuffManagerAPI.Handlers { public class AuthorizationHeaderHandler : DelegatingHandler { private const string KEY = "theKey"; protected override Task&lt;HttpResponseMessage&gt; SendAsync(HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) { var taskCompletionSource = new TaskCompletionSource&lt;HttpResponseMessage&gt;(); const string identityProviderUri = "https://idp.mycompany.com"; IEnumerable&lt;string&gt; apiKeyHeaderValues = null; if (request.Headers.TryGetValues("Authorization", out apiKeyHeaderValues)) { var apiKeyHeaderValue = apiKeyHeaderValues.First(); var token = apiKeyHeaderValue.Split(' ').LastOrDefault(); var tokenProcessor = new JasonWebTokenDecryptor.JasonWebToken(token, KEY); if (tokenProcessor.IsValid) { base.SendAsync(request, cancellationToken).ContinueWith(t =&gt; taskCompletionSource.SetResult(t.Result)); } else { var response = FailedResponseWithAddressToIdentityProvider(identityProviderUri); taskCompletionSource.SetResult(response); } } else { if(request.Method.Method != "OPTIONS") { //No Authorization Header therefore needs to redirect var response = FailedResponseWithAddressToIdentityProvider(identityProviderUri); taskCompletionSource.SetResult(response); } else { base.SendAsync(request, cancellationToken).ContinueWith(t =&gt; taskCompletionSource.SetResult(t.Result)); } } return taskCompletionSource.Task; } private static HttpResponseMessage FailedResponseWithAddressToIdentityProvider(string identityProviderUri) { // Create the response. var response = new HttpResponseMessage(HttpStatusCode.Unauthorized); response.Headers.Add("Location", identityProviderUri); return response; } } } </code></pre> <p><strong>Stuff Controller</strong></p> <pre><code>using System.Collections.Generic; using System.Linq; using System.Net; using System.Web.Http; using StuffManagerAPI.Attributes; using StuffManagerAPI.Models; namespace StuffManagerAPI.Controllers { [HttpHeader("Access-Control-Allow-Origin", "*")] [HttpHeader("Access-Control-Allow-Methods", "OPTIONS, HEAD, GET, POST, PUT, DELETE")] [HttpHeader("Access-Control-Allow-Headers", "Authorization")] [HttpHeader("Access-Control-Expose-Headers", "Location")] public class StuffController : ApiController { private readonly Stuff[] _stuff = new[] { new Stuff { Id = "123456", SerialNumber = "112233", Description = "Cool Item" }, new Stuff { Id = "456789", SerialNumber = "445566", Description = "Another Cool Item" } }; public Stuff Get(string id) { var item = _stuff.FirstOrDefault(p =&gt; p.Id == id); if (item == null) { throw new HttpResponseException(HttpStatusCode.NotFound); } return item; } public IEnumerable&lt;Stuff&gt; GetAll() { return _stuff; } public void Options() { // nothing.... } } } </code></pre> <h3>Client Project</h3> <p><strong>main.html</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;ASP.NET Web API&lt;/title&gt; &lt;link href="../Content/Site.css" rel="stylesheet" /&gt; &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; var baseUrl = "http://api.mycompany.com:8080/api/"; $.support.cors = true; $(document).ready( getListofStuff() ); function setHeader(xhr) { xhr.setRequestHeader('authorization', 'Bearer blah.blah.blah'); } function getListofStuff() { var apiUrl = baseUrl + "stuff/"; $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', crossDomain: true, success: receivedListOfStuff, error: receiveError, beforeSend: setHeader, statusCode: { 0: function() { alert('got 0'); }, 401: function () { alert('finally got a 401'); } } }); } function getIndividualPieceOfStuff(id) { var apiUrl = baseUrl + "stuff/" + id; $.ajax({ url: apiUrl, type: 'GET', dataType: 'json', crossDomain: true, success: receivedIndividualStuffItem, error: receiveError, beforeSend: setHeader }); } function receivedListOfStuff(data) { $.each(data, function (key, val) { var listItem = $('&lt;li/&gt;').text(val.Description); listItem.data("content", { id: val.Id}); $(".myStuff").prepend(listItem); }); $(".myStuff li").click(function () { getIndividualPieceOfStuff($(this).data("content").id); }); } function receivedIndividualStuffItem(data) { $("#stuffDetails #id").val(data.Id); $("#stuffDetails #serialNumber").val(data.SerialNumber); $("#stuffDetails #description").val(data.Description); } function receiveError(xhr, textStatus, errorThrown) { var x = xhr.getResponseHeader("Location"); var z = xhr.responseText; if (xhr.status == 401){ alert('finally got a 401'); } alert('Error AJAX'); } &lt;/script&gt; &lt;/head&gt; &lt;body&gt; . . . . &lt;/body&gt; &lt;/html&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload