So I have MVC5 project and I have some ajax call when clicking a button, the controller it called have custom attribute I made so the framework can redirect someone to login page similar to non-ajax [Authorize].
Custom Attribute:
public class AjaxAuthorizeAttribute : AuthorizeAttribute
{
protected override void HandleUnauthorizedRequest(AuthorizationContext context)
{
if (context.HttpContext.Request.IsAjaxRequest()) {
dynamic urlHelper = new UrlHelper(context.RequestContext);
context.HttpContext.Response.StatusCode = 403;
context.Result = new JsonResult {
Data = new {
Error = "NotAuthorized",
LogOnUrl = urlHelper.Action("Registration", "Membership")
},
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
} else {
base.HandleUnauthorizedRequest(context);
}
}
}
Controller :
[HttpPost()]
[AjaxAuthorize()]
public void Test()
{
//do something
}
Javascript :
//AJAX AUTHORIZE REDIRECT
$(document).ajaxError(function (e, xhr) {
if (xhr.status == 403) {
var response = $.parseJSON(xhr.responseText);
window.location = response.LogOnUrl;
}
});
it works fine in my localhost, however it doesn't work when I deployed it to my webserver. I did some checking and turned out the xhr.responseText in my jquery script have different result, here's the comparison :
localhost :
{"Error":"NotAuthorized","LogOnUrl":"/Membership/Registration"} //correct output
webserver :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<title>403 - Forbidden: Access is denied.</title>
<style type="text/css">
<!--
body{margin:0;font-size:.7em;font-family:Verdana, Arial, Helvetica, sans-serif;background:#EEEEEE;}
fieldset{padding:0 15px 10px 15px;}
h1{font-size:2.4em;margin:0;color:#FFF;}
h2{font-size:1.7em;margin:0;color:#CC0000;}
h3{font-size:1.2em;margin:10px 0 0 0;color:#000000;}
#header{width:96%;margin:0 0 0 0;padding:6px 2% 6px 2%;font-family:"trebuchet MS", Verdana, sans-serif;color:#FFF;
background-color:#555555;}
#content{margin:0 0 0 2%;position:relative;}
.content-container{background:#FFF;width:96%;margin-top:8px;padding:10px;position:relative;}
-->
</style>
</head>
<body>
<div id="header"><h1>Server Error</h1></div>
<div id="content">
<div class="content-container"><fieldset>
<h2>403 - Forbidden: Access is denied.</h2>
<h3>You do not have permission to view this directory or page using the credentials that you supplied.</h3>
</fieldset></div>
</div>
</body>
</html>
Any idea why this is happening?
Method 1 (Preferred)
You can set TrySkipIisCustomErrors to true for your Responses. Like this:
protected override void HandleUnauthorizedRequest(AuthorizationContext context)
{
if (context.HttpContext.Request.IsAjaxRequest()) {
dynamic urlHelper = new UrlHelper(context.RequestContext);
context.HttpContext.Response.TrySkipIisCustomErrors= true;
context.HttpContext.Response.StatusCode = 403;
context.Result = new JsonResult {
Data = new {
Error = "NotAuthorized",
LogOnUrl = urlHelper.Action("Registration", "Membership")
},
JsonRequestBehavior = JsonRequestBehavior.AllowGet
};
} else {
base.HandleUnauthorizedRequest(context);
}
}
Method 2 You can Stop Sending end HTTP Status Code 403 by removing this statement from HandleUnauthorizedRequest.
context.HttpContext.Response.StatusCode = 403;
This will tell your client and server this this request has succeeded. In that case your javascript code would be look something like this,
$(document).ajaxSuccess(function (e, xhr) {
var response = $.parseJSON(xhr.responseText);
if (typeof(response.Error) !== 'undefined') {
window.location = response.LogOnUrl;
}
});