Pieter Borgmans Pieter Borgmans - 8 days ago 6
Ajax Question

XmlHttpRequest to JsonService failing

I am having trouble with sending an XmlHttpRequest to a JsonService.
When I go to the link through google chrome it's working.
When I use this command for chrome (https://i.imgur.com/UxAd8oe.png) it is also working. But I need to get it to work without these steps ofcourse.
This is my XmlHttpRequest:

jQuery(document).ready(function() {
$("#btnSendEmail").click(function() {

var message = new Model.Message();
message.From = document.getElementById("txtEmail").value;
message.Subject = "Contact Formulier: " + document.getElementById("txtSubject").value;
message.Html = "Telefoon: " + document.getElementById("txtTelephone").value + "<br/>" +
"Bedrijf: " + document.getElementById("txtCompany").value + "<br/><br/>" +
"Bericht: " + "<br/>" +
document.getElementById("txtMessage").value;
message.Recipients = [];
var recipient = new Model.Recipient();
recipient.Email = "p.borgmans@mobileaccess.be";
recipient.Name = "Pieter Borgmans";
recipient.Type = "To";
message.Recipients.push(recipient);

var params = JSON.stringify(message);
var url = "http://localhost:26294/JsonService.svc/Test";

var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.contentType = "application/json; charset=utf-8";
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onload = function() {
if (this.status === 200) {
var response = (this.responseText) ? JSON.parse(this.responseText) : this.responseText;
$("#lblSendMailMessage").text = response;
} else {
$("#lblSendMailMessage").text = xhr.status + ": " + xhr.statusText;
}
};
xhr.onerror = function (onErrorArgs) {
$("#lblSendMailMessage").text = "Error";
};
xhr.send();
});
});


Code in my service interface:

[ServiceContract]
public partial interface IBusinessManager
{

[OperationContract]
[FaultContract(typeof (ServiceFault))]
[WebGet(
RequestFormat = WebMessageFormat.Json,
ResponseFormat = WebMessageFormat.Json,
BodyStyle = WebMessageBodyStyle.WrappedRequest,
UriTemplate = "Test")]
string Test();
}


And I added this code in my web.config:

<system.webServer>
<modules runAllManagedModulesForAllRequests="true" />
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control" />
<add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS, TRACE, HEAD" />
<add name="Access-Control-Max-Age" value="1000" />
</customHeaders>
</httpProtocol>




Anyone got an idea?

Thanks!

Answer

I put the custom headers in the Global.asax file from my webservice instead of my web.config & it worked.

protected void Application_BeginRequest(object sender, EventArgs e)
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
        if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
        {
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, TRACE, HEAD");
            HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Accept, Accept-Encoding, Accept-Language, Host, Referer, Origin, Connection, User-Agent, Access-Control-Request-Method, Access-Control-Request-Headers, Access-Control-Allow-Origin, Access-Control-Allow-Methods, Access-Control-Allow-Headers, Access-Control-Max-Age, Content-Type");
            HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
            HttpContext.Current.Response.End();
        }
    }