After creating a REST service and successfully connecting to it using JQuery ajax with JSON data, I encountered an issue specifically when trying to use the POST method. For some reason, the service is not being triggered during a POST request.
The error message I received is as follows: XMLHttpRequest cannot load http://localhost:23262/GetAllDrawsShort. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:40464' is therefore not allowed access.
Interestingly, I have set the Access-Control-Allow-Origin header to allow all domains, yet the problem persists.
I researched similar issues and attempted suggested solutions without success.
Below is the code in Global.asax (Service):
private void EnableCrossDmainAjaxCall()
{
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");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
HttpContext.Current.Response.End();
}
}
And here's the Service class snippet:
[OperationContract]
[WebInvoke(Method = "POST", UriTemplate = "GetAllDrawsShort", BodyStyle = WebMessageBodyStyle.WrappedRequest, ResponseFormat = WebMessageFormat.Json)]
public List<DrawShortObject> GetAllDrawsShort(string token, Guid userId)
{
if (Util.IsAuth(token))
{
return new DrawLogic().GetAllDrawsShort(userId);
}
else return null;
}
Lastly, the JQuery code on the client page:
function GetAllDrawsShort() {
var jData = {};
jData.token = "123";
jData.userId = "2f9e15d9-3654-4a43-89f4-07fea98a146f";
return $.ajax({
cache: false,
type: "POST",
async: true,
url: address + "GetAllDrawsShort",
data: JSON.stringify(jData),
contentType: "application/json",
dataType: "json"
});
};