Strange Behavior when using jQuery/asp.net WebApi

Question

I have 2 Web API Projects:

• Api1 is a testing-Environment for the JavaScript Front-End, but has a API Back-end(the default ValuesController), also for testing.
• Api2 is the "true" Back-end, from which the Experimental JavaScript UI schould pull Data. For Testing, i use the default ValuesController here too, because, i want to have the same Output.

Status Quo

• The Api1-UI can query the Data from the ValuesController of the own API

• The Api2 returns the Correct Data(tested in Firefox and with Fiddler)

The Code

JavaScript Client:

    var _load = function (url) {
        $.ajax({
            url: url,
            method: 'GET',
            accepts: "application/json; charset=utf-8",
            success: function (data) {
                alert("Success: " + data);
            },
            error: function (data) {
                alert("Error :" + data);                  
            }
        });
    };

WebApi Controller method:

    public IEnumerable<string> Get()
    {
        return new string[] { "value1", "value2" };
    }

Problem

The JavaScript UI of the experimental Front-End is not able to display, or even receive, the data from the API 2, which is, according to Fiddler, sent correct.

My first thought was, I am using the wrong Method, but i tried $.getJSON and $.ajax. But i always end up with an error. It just says statusText= "Error" I don't get, why it can display Data from the own ApiController, but not from the "External"...

Thanks for any Help/Suggestions

Answer 1

You seem to be accessing data from X from a different domain Y using ajax. This seems to be a classic cross domain access issue.

You need to set Access-Control-Allow-Origin to value " * " in your response header.

 Response.Headers.Add("Access-Control-Allow-Origin", "*")

There various ways you can solve this

• defining this header in IIS
• using a actionfilter attribute like below

FilterAttribute

public class AllowCrossSiteJsonAttribute : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        if (actionExecutedContext.Response != null)
            actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");

        base.OnActionExecuted(actionExecutedContext);
    }
}

Using Attribute on Controller Action

[AllowCrossSiteJson]
public Result Get(int id)
{
   //return appropriate result
}