Unable to post data to web api using jQuery while Postman works fine

Question

I have created an asp.net web api and hosted it on a public website. Using Postman I am able to post data to this web API, either running on localhost or on the public site. However, when I tried to post data using a sample asp.net web forms application using jquery it doesn't work. When I try the localhost I get this error: {"readyState":4,"status":404,"statusText":"error"}. When I tried the one running on the public site I don't get any response and neither success nor error section in the jquery code is reached. My current jquery code is given below:

function sendJSON(parameters) {
        
        $.ajax({
            url: "http://localhost:49918/SendOrder",
            type: "POST",
            contentType: "application/json;odata=verbose",
            headers: { 'Access-Control-Allow-Origin': '*' },
            crossDomain: true,
            data:jsonData,
            dataType: 'JSONP',
            success: function (data) {
                alert("success");
                console.log('success');
            },
            error: function (data) {
                alert("error: " + JSON.stringify(data));
                console.error('error');
            },
            beforeSend: function (xhr) {

                xhr.setRequestHeader("Authorization", "Bearer 438590.B089699E7990B9ECCA9E58EA823B0A57");
            }
        });
    
    }

I copied the bearer token from Postman. I have tried without the beforeSend section too.

Where is jsonData defined? Your function accepts parameters argument but you are not using it in ajax request. To prevent CORS, Access-Control-Allow-Origin headers need to be set on server side, not in headers of your request. Finally, you are using wrong mime type for JSONP. Correct mime type is application/javascript, not application/json. — Nemanja, Jul 11 '21 at 18:14
You have to show your Api action code and jsonData at least. — Serge, Jul 11 '21 at 18:27
You will let the server know what type of data you are sending to the server and what type of data you expecting response from the server. Here is the URL with sample code for you to try it out. https://stackoverflow.com/questions/2722750/ajax-datatype — Thomson Mixab, Jul 11 '21 at 19:02

score 0 · Accepted Answer · answered Jul 16 '21 at 16:29

I have added the following line to AJAX. In addition, I have enabled CORS on the web API by following this excellent link: https://learn.microsoft.com/en-us/aspnet/web-api/overview/security/enabling-cross-origin-requests-in-web-api

async: false,

Following is the code after the update:

$.ajax({
            type: 'POST',
            url: 'http://localhost:49918/SendOrder',                
            dataType: 'json',
            async: false,                
            data: JSON.stringify(jsonData),
            contentType: "application/json",
        success: function(data) {
            alert("Success: " + data);
        },
        error: function (data) {
            alert("error: " + JSON.stringify(data));
        }
            
        });

Unable to post data to web api using jQuery while Postman works fine

1 Answers1