0

May I know the reason why the code below returns NetworkError when I try to invoke the WebAPI using jQuery Ajax? The Web Method was called successfully, but giving out error after it returned.

I can access the Web Method using IE if I change the access to HttpGet.

So it must be something wrong with jQuery Ajax. Hoping someone would help.

$.ajax({
type: "POST",
async: false,
url: "http://localhost:5000/API/Test",
xhrFields: { withCredentials: true },
data: JSON.stringify(Params),
contentType: "application/x-www-form-urlencoded",
success: function (msg) {
},
error: function (XHR, errStatus, errorThrown) {
});

[Route("API/Test"), HttpPost]
public string Test()
{
JsonConvert.SerializeObject(new { Test = "Test Message" });
}
Nameless
  • 1,026
  • 15
  • 28
s k
  • 4,342
  • 3
  • 42
  • 61
  • What was the `errStatus` and `errorThrown` variables' value on failure? – Nameless Aug 29 '17 at 11:56
  • 1) if you are posting some data to the method, the method should receive it in a [FromBody] parameter. 2) the method doesn't returns anything. 3) If you are passing JSON data to it, the content-type should be application/json – Shahbaz Aug 29 '17 at 12:08

2 Answers2

0

Some changes are needed to make this work

1. Content-type

You are using the content type of "application/x-www-form-urlencoded" but sending the data as a JSON string. Change the content type to "application/json". The Api will by default deserialize the request body from json so it should work.

2. No input in the Api signature

The Test() does not read anything from the request body. Add an object as parameter which matches the object sent by the client.

3. No return

The Api method does not return a string as the signature promise.

Final result

$.ajax({
    type: "POST",
    async: false,
    url: "http://localhost:5000/API/Test",
    xhrFields: { withCredentials: true },
    data: JSON.stringify(Params),
    contentType: "application/json",
    success: function (msg) {
        console.log(msg);
    },
    error: function (XHR, errStatus, errorThrown) {
        console.log(errStatus);
    });

[Route("API/Test"), HttpPost]
public string Test(RequestBodyDTO body)
{
    return JsonConvert.SerializeObject(new { Test = "Test Message" });
}
Marcus Höglund
  • 16,172
  • 11
  • 47
  • 69
  • Thanks for the answer. However it doesn't work. 1. If I change to 'application/json', the WebApi doesn't get called at all. 2. The input Params is not necessary in this case, and it doesn't affect the call, WebAPI will happily ignore it. 3. It does return a Json string – s k Aug 29 '17 at 22:25
  • Ok, Then check if the content type of json is added to the media type formatter configuration in Startup.cs, If no params are needed why do you send it with the ajax call? – Marcus Höglund Aug 30 '17 at 07:51
0

I have found the answer to my own question.

Even when I am calling from the same PC (but using jQuery Ajax), I need to add:

[AllowAnonymous] // To the controller

and

appBuilder.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll); // To the HttpConfiguration before any routes
s k
  • 4,342
  • 3
  • 42
  • 61