How can i resolve this error

Question

I am trying to call WCF Services using AJAX , below is my code:

$.ajax({
    url: "http://localhost/TestingServices/Service1.svc/GetData"
    data: "{'value:1}",
    type: "POST",
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    success: function(data) {
        alert(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        alert(textStatus);
    }
});

But after execution it gives me following error:

XMLHttpRequest cannot load 
  http://localhost/TestingServices/Service1.svc/GetData.Response to 
  preflight request doesn't pass access control check: 
  No 'Access-Control-Allow-Origin' header is present on 
  the requested resource. Origin 'null' is therefore not 
  allowed access. The response had HTTP status code 404.

Can anyone help me how to resolve this ?

Answer 1

Try 2 Add HttpProtocols in web.config of your service project

    <system.webServer>
    <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, PUT, DELETE, OPTIONS" />
      </customHeaders>
    </httpProtocol>
</system.webServer>

Answer 2

please try this one....

$.ajax({
type: "GET",
url: "http://localhost/TestingServices/Service1.svc/GetData",
dataType: "jsonp",
success: readData(data),
error: function (xhr, ajaxOptions, thrownError) {
  alert(xhr.status);
  alert(thrownError);
 }
})