XMLHttpRequest cannot load [url] Response for preflight has invalid HTTP status code 400

Question

I am getting an error saying "XMLHttpRequest cannot load [url] Response for preflight has invalid HTTP status code 400.

I tried calling from a form and it appears to be working. I debug the service from inside Visual Studio and it worked just fine

Calling the service this way:

                    $.ajax({
                        type: "POST",
                        url: "http://localhost:54664/PopulateCombo.svc/GetCodigo",
                        data: { EmpresaId: 100100, LanguageId: 5, TipoId: TipoId },
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            var models = (typeof response.d) == 'string' ? eval('(' + response.d + ')') : response.d;
                            for (var i = 0; i < models.length; i++) {
                                var val = models[i];
                                var text = models[i];
                                $('#ddValor').addOption(val, text, false);
                            }
                        }
                    });

My web config.

            <system.webServer>
            ....
            <httpProtocol>
                  <customHeaders>
                    <add name="Access-Control-Allow-Origin" value="*" />
                    <add name="Access-Control-Allow-Headers" value="Accept, Content-Type, Origin" />
                    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
                  </customHeaders>
                </httpProtocol>
            ....
              </system.webServer>

              <system.serviceModel>
                <bindings>
                  <basicHttpBinding>
                    <binding name="BasicHttpBinding_IPopulateCombo" sendTimeout="00:05:00" />
                    <binding name="BasicHttpBinding_IPopulateCombo1" />
                  </basicHttpBinding>
                </bindings>
                <client>

                  <endpoint address="http://localhost:54664/PopulateCombo.svc"
                    binding="basicHttpBinding" bindingConfiguration="BasicHttpBinding_IPopulateCombo1"
                    contract="ACPSvc.IPopulateCombo" name="BasicHttpBinding_IPopulateCombo1" />
                </client>
              </system.serviceModel>

Answer 1

First, use the JSON.stringify function when passing your data:

data: JSON.stringify({ EmpresaId: 100100, LanguageId: 5, TipoId: TipoId }),

Next, use the webHttp endpoint behavior:

<bindings>
    <webHttpBinding>
        <binding name="BasicHttpBinding_IPopulateCom" sendTimeout="00:05:00" />
        <binding name="BasicHttpBinding_IPopulateCombo1" />         
    </webHttpBinding>
</bindings>
<behaviors>
    <endpointBehaviors>
        <behavior name="WebHTTPBehavior">
          <webHttp helpEnabled="true"/>
        </behavior>
    </endpointBehaviors>
</behaviors>
<services>
    <endpoint address="http://localhost:54664/PopulateCombo.svc" binding="webHttpBinding" contract="ACPSvc.IPopulateCombo" behaviorConfiguration="WebHTTPBehavior"/>
</services>

Answer 2

I added this in my web.config and it fixed this issue (bumped into another)

<serviceHostingEnvironment>
  <serviceActivations>
    <add factory="System.ServiceModel.Activation.WebServiceHostFactory"
         relativeAddress="./ACPWebSvc/PopulateCombo.svc"
         service="PopulateCombo"/>
  </serviceActivations>
</serviceHostingEnvironment>