Response for preflight has invalid HTTP status code 400 Web API MVC

Question

We have created a web api, and trying to post data from ajax using that api. web api is working for post request when i am trying from Postman plugin, but not working when we are posting through ajax call using json data.

We are getting Error of XMLHttpRequest cannot load http://localhost:922/api/leaddetails/createlead. Response for preflight has invalid HTTP status code 400

Here is the ajax call code:

function SaveLead() {

        var Lead = {
            "lead_owner": "Pritam",
            "company_name": "C",
            "title": "T",
            "first_name": "Santosh",
            "last_name": "M",
            "address1": "Rajasthan",
            "address2": "d",
            "city": "d",
            "state": "d",
            "country": "d",
            "postal_code": "d",
            "email": "[email protected]",
            "phone": "d",
            "website": "d",
            "mobile": "8787878787",
            "lead_status": "d",
            "lead_source": "d",
            "industry": "d",
            "annual_revenue": "d",
            "skype_id": "d",
            "campaign_source": "d",
            "description": "d",
            "created_by": "A",
            "updated_by": "a"
        };

        $.ajax({
            type: "POST",
            contentType: "application/json",
            url: 'http://localhost:922/api/leaddetails/createlead',
            data: JSON.stringify(Lead),
            crossOrigin: true,
            dataType: "json",
            success: function (res) {
                alert("The result is : " + res);
            },
            error: function (xhr) {
                alert(xhr.responseText);
            }
        })



    }

Here is my web.config file:

<handlers>
  <remove name="WebDAV"/>
  <remove name="OPTIONSVerbHandler" />
  <remove name="TRACEVerbHandler" />
  <remove name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" />
  <remove name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" />
  <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
  <add name="ExtensionlessUrlHandler-ISAPI-4.0_32bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness32" responseBufferLimit="0" />
  <add name="ExtensionlessUrlHandler-ISAPI-4.0_64bit" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" modules="IsapiModule" scriptProcessor="%windir%\Microsoft.NET\Framework64\v4.0.30319\aspnet_isapi.dll" preCondition="classicMode,runtimeVersionv4.0,bitness64" responseBufferLimit="0" />
  <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="GET,HEAD,POST,DEBUG,PUT,DELETE,PATCH,OPTIONS" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
  <add name="OPTIONSVerbHandler" path="*" verb="OPTIONS" modules="ProtocolSupportModule" requireAccess="None" responseBufferLimit="4194304" />
</handlers>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <add name="Access-Control-Allow-Headers" value="Content-Type, Accept" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>
</httpProtocol>

I have tried to post from Postman plugin. From there it is posting data perfectly.

Even though you are connecting to localhost, you are connecting on port 922, so the request is considered cross-origin. Have you enabled CORS on the server? — Cloud SME
probably best to show your config and how you've done it, as it's easy to get wrong. — ADyson
Get Fiddler and compare both requests to the server (Postman vs jQuery). — maxbeaudoin

Manish Kumar Manish Kumar · Accepted Answer · 2017-03-31T09:56:49

Finally got the answer from a friend. I don't know this is the solution or not but changing ajax syntax worked for me.

    var apiurl = 'http://localhost:922/api/leaddetails/createlead';
    var a = new XMLHttpRequest();
    function SaveLead() {
    var Lead = {
            "lead_owner": "Pritam",
            "company_name": "C",
            "title": "T",
            "first_name": "Sourav",
            "last_name": "M",
            "address1": "Bhilai",
            "address2": "d",
            "city": "d",
            "state": "d",
            "country": "d",
            "postal_code": "d",
            "email": "[email protected]",
            "phone": "d",
            "website": "d",
            "mobile": "8787878787",
            "lead_status": "d",
            "lead_source": "d",
            "industry": "d",
            "annual_revenue": "d",
            "skype_id": "d",
            "campaign_source": "d",
            "description": "d",
            "created_by": "A",
            "updated_by": "a"
        };



        a.open('POST',apiurl,true),
         $.ajax({

             url: apiurl,
             type: "POST",
             ContentType: "application/json; charset=utf-8",
             data: Lead,
             crossOrigin: true,
             dataType: "json",
             cache: false,
             complete: function (res) {
                 alert("Data Added Successfully");
             },
             error: function (xhr) {
                 alert("Error");
             }
         })

    }

Thanks all for replying.

Response for preflight has invalid HTTP status code 400 Web API MVC

1 Answers