ASP.NET MVC Ajax form submitted cross domain not sending Cookies - asp.net-mvc

Question

I have a site that has some forms that use ASP.NET MVC Ajax. An example of BeginForm method:
#using (Ajax.BeginForm("HandleSignin", "Profile", null, new AjaxOptions() {
HttpMethod = "POST",
Url = Url.Action("HandleSignin", "Profile", null, Request.Url.Scheme),
OnBegin = "SetWithCredentialsTrue(xhr)",
InsertionMode = InsertionMode.Replace,
UpdateTargetId = "signin-form-container" },
new { id = "sign-in-form", #class = "text-left-desktop group" }))
{
#Html.AntiForgeryToken()
#Html.TextBoxFor(x => Model.Email, new { placeholder = "Email" })
#Html.PasswordFor(x => Model.Password, new { placeholder = "Password" })
<input type="submit" value="SignIn" class="button small-button">
}
Note that because of the Request.Url.Scheme param in the of the Url.Action method, the URL is being set to a different domain than the domain that the browser is getting this from. This is done because the main site is hosted statically using a CDN while the form is loaded from another domain using AJAX. This works, except that the cookies are not sent in the AJAX request. I tried to have the cookies sent by setting xhr.withCredentials = true by using the OnBegin event and this JavaScript:
<script type="text/javascript">
function SetWithCredentialsTrue(xhr) {
console.log("SetWithCredentialsTrue(xhr)", xhr);
xhr.withCredentials = true;
}
</script>
While I can see that SetWithCredentialsTrue() method gets called, it does not seem to work in that the HTTP Request generated when the form is submitted does not have the Cookie header.
All of the server-side handlers are setting the Access-Control-Allow-Credentials response header to true and the Access-Control-Allow-Origin to the main (static) site domain.
UPDATE: With some more console logging, I have verified that the xhr parameter passed to my OnBegin event handler (SetWithCredentialsTrue) is NOT an XMLHttpRequest object and hence setting withCredentials on it does not have an affect. So the question is how can I access the XMLHttpRequest object?

Answer 1

I finally figured this out. The XMLHttpRequest object is not exposed via the ASP.NET MVC library. I was able to alter jquery.unobtrusive-ajax.js, the JS library used by the ASP.NET MVC helper so that it sets withCredentials to true:
$(document).on("submit", "form[data-ajax=true]", function (evt) {
var clickInfo = $(this).data(data_click) || [],
clickTarget = $(this).data(data_target),
isCancel = clickTarget && clickTarget.hasClass("cancel");
evt.preventDefault();
if (!isCancel && !validate(this)) {
return;
}
asyncRequest(this, {
url: this.action,
type: this.method || "GET",
data: clickInfo.concat($(this).serializeArray()),
xhrFields: {
withCredentials: true
}
});
});
Note: xhrFields is the part that I added.

Answer 2

as per my understanding what you trying to do is, you want to send data from one domain to another domain using AJAX post right?
If it is true then, i want to tell you that browser doesn't allow you to do that because of security issue.
If you still want to do that then you have two option's by using CORS and JSONP.
http://csharp-video-tutorials.blogspot.in/2016/09/calling-aspnet-web-api-service-in-cross.html
http://csharp-video-tutorials.blogspot.in/2016/09/cross-origin-resource-sharing-aspnet.html