Ajax in different project

Question

I have a project in Asp.Net MVC with the following method:

public ActionResult ObterCursos()
{
    List<curso> cursos = new List<curso>();

    curso curso_ = new curso();
    curso_.Nome = "Análise";
    curso_.Periodo = 3;
    curso_.qtdSemestre = 5;
    curso_.Codigo = "ADS";

    cursos.Add(curso_);

    curso_ = new curso();
    curso_.Nome = "Ciencia da Computação";
    curso_.Periodo = 3;
    curso_.qtdSemestre = 8;
    curso_.Codigo = "CDC";

    cursos.Add(curso_);

    return Json(cursos, JsonRequestBehavior.AllowGet);
}

As you can see, it returns a Json as a result. I am running such project on my local machine.
In another project, I am trying to make an Ajax request to the method created in the project previously described.

$.ajax({
    url : "http://localhost:10642/Mobile/ObterCursos",
    type : "GET",
    dataType : "json",
    success : function(dados) {
        resultado = dados;
        alert("json sucess")
    },
    error : function(xhr, ajaxOptions, error) {
        alert("erro json: " + xhr.responseText)
    }
});

Upon execution, the alert of error is shown and the following error is displayed on the console:

Xmlhttprequest cannot load http://localhost:10642/Mobile/Get courses. No 'Access-Control-Allow-Origin' header is present on the requested Resource. Origin 'null' is therefore not allowed access.

Conducting my research, I discovered I should change the dataType of Ajax for jsonp. And so I did, but alert of error is still shown, however the error that was displayed on console no longer appears.
Can someone help me?

Answer 1

This error is caused by you making an ajax request from a different domain, probably in your case it is only the port that differs, as both must be on the localhost.

To solve, just add the header Access-Control-Allow-Origin in the server response. One way to do this is to add the following section in the Web.config file:

<system.webServer>

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

In this case the attribute value="*" you are freeing up access to any domain, but you can free up to specific domains by changing the * by the domain name (in your case localhost:porta for the development environment).

---

Another way to add the header is by using a filter

public class AllowOriginAttribute : ActionFilterAttribute
{
    public override void OnActionExecuting(ActionExecutingContext filterContext)
    {
        filterContext.RequestContext.HttpContext.Response.AddHeader("Access-Control-Allow-Origin", "*");
        base.OnActionExecuting(filterContext);
    }
}

Then add the attribute to the Controller method:

[AllowOrigin]
public ActionResult ObterCursos()