Cross-site Ajax WebService or WebMethod

Question

I am developing two sites. In one of them I have page Service.aspx, that have some WebMethod. I want to have access to them from other site.

Service.aspx:

namespace Interface
{   
    public partial class Service : System.Web.UI.Page
    {
        [WebMethod]
        public static bool CheckUserLogin(string login)
        {
            BL.UserBL logic = new BL.UserBL();                
            return logic.isUnique(login);
        }
    }
}

script.js:

function isGoodLogin() {
    var login = $("[id$='tbSignUpLogin']").val();
    var data = '{"login":"' + login + '"}';
    var flag = false;
    $.ajax({
        type: "POST",
        url: "http://95.31.32.69/Service.aspx/CheckUserLogin",
        async: false,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            if (msg.d == true) {
                flag = true;
            }
        },
        error: function (xhr, status, error) {
            handleException(xhr.responseText)
        }
    });
    return flag;
}

After that, when I use my script, I have error:

XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

Then I try to solve this problem. My Web.config:

<configuration>
  <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <webServices>
      <protocols>
        <add name="HttpGet"/>
        <add name="HttpPost"/>
      </protocols>
    </webServices>
  </system.web>

  <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>
  <connectionStrings>
    <add name="TestSystemEntities" connectionString="metadata=res://*/Model1.csdl|res://*/Model1.ssdl|res://*/Model1.msl;provider=System.Data.SqlClient;provider connection string=&quot;Data Source=WIN-V5EHKO65FPU\SQLEXPRESS;Initial Catalog=C:\INETPUB\ACMTESTSYSTEM\INTERFACE\APP_DATA\TESTSYSTEM.MDF;Integrated Security=True;MultipleActiveResultSets=True&quot;" providerName="System.Data.EntityClient" />
  </connectionStrings>
</configuration>

After that I try to use Global.asax:

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");
}

Then I try to use WebService.asmx:

namespace Interface
{
   [System.Web.Script.Services.ScriptService]
    public class WebService : System.Web.Services.WebService
    {

        [WebMethod]
        public bool CheckUserLogin(string login)
        {
            BL.UserBL logic = new BL.UserBL();
            return logic.isUnique(login);
        }

        [WebMethod]
        [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
        public string Foo()
        {
            var json = new JavaScriptSerializer().Serialize(new
            {
                Prop1 = "some property",
            });
            string jsoncallback = HttpContext.Current.Request["jsoncallback"];
            return string.Format("{0}({1})", jsoncallback, json);
        }
    }
}

Maybe problem in my scripts?

1:

var dataURL = "http://95.31.32.69/WebService.asmx/CheckUserLogin?login=1";
$.getJSON(dataURL+"&jsoncallback=?",myCallback);
function myCallback(data){     
 alert(data);
}

Returns the error:

Uncaught SyntaxError: Unexpected token <

2:

function isGoodLogin2() {
    var login = $("[id$='tbSignUpLogin']").val();
    var data = '{"login":"' + login + '"}';
    var flag = false;
    $.ajax({
        type: "POST",
        url: "http://95.31.32.69/WebService.asmx/CheckUserLogin",
        async: false,
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
                success: function (msg) {
            if (msg.d == true) {
                flag = true;
            }
        },
        error: function (xhr, status, error) {
            handleException(xhr.responseText)
        }
    });
    return flag;
}

Returns the error:

XMLHttpRequest cannot load http://95.31.32.69/WebService.asmx/CheckUserLogin. Origin null is not allowed by Access-Control-Allow-Origin.

3:

  var url = 'http://95.31.32.69/WebService.asmx/CheckUserLogin?login=1&callback=?';
  $.get(url, function (data) {
    alert(data);
  });

Returns the error:

XMLHttpRequest cannot load http://95.31.32.69/WebService.asmx/CheckUserLogin. Origin null is not allowed by Access-Control-Allow-Origin.

4:

var dataURL = "http://95.31.32.69/WebService.asmx/Foo";
    $.getJSON(dataURL+"&jsoncallback=?",myCallback);
    function myCallback(data){     
     alert(data);
    }

Returns the error:

Failed to load resource: the server responded with a status of 400 (Bad Request)

And many others. The web site works on IIS 7.

Answer 1

AJAX calls can only be made on the same originating server i.e. Same-Origin-Policy due to security reasons. Use other methods such as JSONP for cross-domain requests. Hence the error Origin null is not allowed by Access-Control-Allow-Origin.

Same-Origin Policy