Could not add Access-Control-Allow-Origin to my WCF library Project

Question

I'm trying to understand why this ajax called doesn't work

 $.ajax({
        type: 'GET',
        url: "http://localhost:8732/Design_Time_Addresses/InMotionGIT_NT.Address.Service/AddressService/json/capitalize",
        data: { streetAddress : JSON.stringify(streetAddress) , consumer :  JSON.stringify(consumer)} ,
        datatype: "jsonp",
        success: function (data) {
            $('body').append('<div>'+data.IDblah+' '+ data.prueba+'</div>');
            alert(data.IDblah);
        }

The service receive the data is correctly received and the response it's correct. Why am I doing wrong?

I tried adding this property to the ajax called but without success crossDomain : true

[OperationContract()]
[WebInvoke(Method="GET", RequestFormat=WebMessageFormat.Json, ResponseFormat=WebMessageFormat.Json)]
public string Capitalize(StreetAddress streetAddress,ConsumerInformation consumer)

The error that i'm getting it's the common

 XMLHttpRequest cannot load Origin http://localhost:50816 is not allowed by Access-Control-Allow-Origin.

UPDATE

I tried to add the header to the response by adding the configuracion in my App.config file but without success

<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>
</system.webServer>

Solution 1

This link would help: http://enable-cors.org/

You need to add the following headers in your response that is sent back to the client:

//Allow all domains

Access-Control-Allow-Origin: *

OR

//Allow specific domains

Access-Control-Allow-Origin: http://example.com:8080 http://foo.example.com

Solution 2

Put this in the service side of your configuration file

<system.webServer>
<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
  </customHeaders>
</httpProtocol>
</system.webServer>

It works for me! Thanks!

Solution 3

the solution is to create a file Global.asax

protected void Application_BeginRequest(object sender, EventArgs e)
{
    HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "http://localhost");
    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();
    }
}

Solution 4

I was getting the same problem when working with my WCF service directly in Visual Studio, in Chrome and Firefox. I fixed it with the following:

Edit the Global.asax file with below function:

            private void EnableCrossDomainAjaxCall()
            {
                HttpContext.Current.Response.AddHeader("Access-Control-Allow-Origin", "*");

                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, Authorization, Accept");
                    HttpContext.Current.Response.End();
                }
            }

Then call the function from

    protected void Application_BeginRequest(object sender, EventArgs e)
    {
       EnableCrossDomainAjaxCall();
    }

You can get more information from the following url:

http://blog.blums.eu/2013/09/05/restfull-wcf-service-with-cors-and-jquery-and-basic-access-authentication.

View more solutions