The “Cross-Domain” Issue

The “Cross-domain” or “Cross-site” HTTP requests are HTTP requests for resources from a different domain than the domain of the resource making the request. Generally speaking, the default behavior of web browsers is to block “cross-domain” accesses if they feel that the types of accesses are “un-safe”. From the web browser’s perspective, a domain is recognized by the “URL”. For example, when the browser loads an image from “http://domainb.foo:8080/image.jpg”, the domain of the image file is identified by “http://domainb.foo:8080”, which includes the “port number”.

In this article, Visual Studio assigns the port number “4305” to the WCF REST Service and the port number “5187” to the web application to the debug servers to run the application. When an “AJAX” call is made to the WCF REST Service from the web application in Debug mode, it is considered “cross-domain” by the web browsers, since the web application and the Service have different “port numbers”. To address this problem, we will need the WCF REST Service to explicitly tell the web browsers that “cross-domain” access is allowed. This can be done in the “Global.asax.cs” file in the “StudentService” project:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.SessionState;
using System.ServiceModel.Activation;
using System.Web.Routing;

namespace StudentService
{
public class Global : System.Web.HttpApplication
    {
protected void Application_Start(object sender, EventArgs e)
        {
            RouteTable.Routes.Add(new ServiceRoute("", 
new WebServiceHostFactory(), typeof(Service)));
        }

protected void Application_BeginRequest(object sender, EventArgs e)
        {

HttpContext.Current.Response.Cache.SetCacheability(HttpCacheability.NoCache);
HttpContext.Current.Response.Cache.SetNoStore();

                EnableCrossDmainAjaxCall();
        }

private void EnableCrossDmainAjaxCall()
        {
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin",
"http://localhost:5187");

if (HttpContext.Current.Request.HttpMethod == "OPTIONS")
            {
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Methods", 
"GET, POST");
HttpContext.Current.Response.AddHeader("Access-Control-Allow-Headers",
"Content-Type, Accept");
HttpContext.Current.Response.AddHeader("Access-Control-Max-Age",
"1728000");
HttpContext.Current.Response.End();
            }
        }
    }
}

In the “Application_BeginRequest” event, the function “EnableCrossDmainAjaxCall” is called. This function sends the required “HTTP access control” headers to the browsers. Among the popular browsers like “Firefox”, “Chrome”, “Safari”, and “IE”, each may behave slightly differently, but generally, all follow a similar pattern.

• For the “jQuery” “AJAX” calls to be successful, browsers must receive the response header “Access-Control-Allow-Origin”, and the value of this header must identify the domain of the calling web application. If you want all the web pages from all the domains to access your services, you can set the value as “*”.
• If the browsers feel that your “AJAX” call is “un-safe”, they will send a “preflighted” request to the server before they make the actual “AJAX” call. In this article, the call to the “OperationContract” “AddStudentToDepartment” uses a “POST” method, and the “content type” is “application/json”, it is considered as “un-safe” by most browsers. The “preflighted” request uses the “OPTIONS” method. If the server receives an “OPTIONS” request, it needs to use “Access-Control-Allow-Methods” to inform the browser the HTTP methods allowed for the “AJAX” call. It also needs to use “Access-Control-Allow-Headers” to inform the browser the HTTP headers allowed in the actual “AJAX” call. In this article, the WCF REST Service allows the browsers to use “POST” and “GET” methods, and allows the headers “Content-Type” and “Accept” used in the “AJAX” call.
• The value of the “Access-Control-Max-Age” tells the browsers how long the “preflighted” results remain valid, so when the browsers issue the same “AJAX” call again, they do not need to send the “OPTIONS” request before the “preflighted” results expire.

Different browsers may be slightly different with the “HTTP access control”. But I have tested the “EnableCrossDmainAjaxCall” function with “Firefox”, “Chrome”, “Safari”, and “IE”. They all respond nicely to the headers sent by the “EnableCrossDmainAjaxCall” function.

[cut from : http://www.codeproject.com/KB/ajax/jQueryWCFRest.aspx]