Method not allowed (http error 405) , wcf , rest service , post method

Question

I am trying to call post method which is implemented in wcf , from html , ajax script. I am able to invoke from postman . I tried google , stackoverflow previous questions , but none of them helped me.

My web.config from wcf :

  <standardEndpoints>
      <webScriptEndpoint>
        <standardEndpoint name="" crossDomainScriptAccessEnabled="true" />
      </webScriptEndpoint>
    </standardEndpoints>

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

The following is my ajax call in html

  $.ajax({
      type: "POST",
      url: "http://localhost:8078/SportsClubDefault.svc/Validate",
      data: st,
       contentType: "application/json; charset=utf-8",
       processData:true,
      dataType: "json",
      success: function (data) {
          // Play with response returned in JSON format
            alert('Login success');
      },
       error: function (xhr) {
             alert('Login failed');
         }
     });

The following is the image from postman

The following is the image of html console

Answer 1

This is a CORS issue, You can enable cors by creating a global.asax file on wcf service,

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
    if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
    {
        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", "POST, PUT, DELETE");

        HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Accept");
        HttpContext.Current.Response.AddHeader("Access-Control-Max-Age", "1728000");
        HttpContext.Current.Response.End();
    }
}