Ajax json跨域发布到控制器，“不允许”访问控制允许标头

Question

我创建了一个简单的 MVC 控制器操作，它接受一些 json 数据 - 然后返回 true 或 false。

    [AllowCrossSiteJson]
    public JsonResult AddPerson(Person person)
    {
            //do stuff with person object
           return Json(true);
    }

我从 javascript 调用它：

        function saveData(person) {
            var json = $.toJSON(person); //converts person object to json
            $.ajax({
                url: "http://somedomain.com/Ajax/AddPerson",
                type: 'POST',
                dataType: 'json',
                data: json,
                contentType: 'application/json; charset=utf-8',
                success: function (data) {
                    alert("ok");
                }
            });
        }

只要我在同一个域中，一切都会正常，但是一旦我从另一个域调用它，我就会遇到问题。

控制器上有一个操作过滤器“AllowCrossSiteJson”，它将标头“Access-Control-Allow-Origin”设置为“*”，允许任何源访问控制器操作。

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

但是 - 当跨域调用时，我在 firebug 中收到此错误：

选项http://somedomain.com/Ajax/AddPerson?packageId=3 500（内部服务器错误） XMLHttpRequest 无法加载 http://somedomain.com/Ajax/AddPerson。 Access-Control-Allow-Headers 不允许请求标头字段 Content-Type。

这里出了什么问题？

我几个小时以来一直在寻找可能的解决方案，这似乎与使用 OPTIONS 的 jquery 有关（而不是我期望的 POST）。

如果这确实是问题，我该如何解决？

Answer 1

要修复 Access-Control-Allow-Origin 错误，您需要在响应中包含以下标头：

Access-Control-Allow-Headers: Content-Type

基本上，任何“非简单”标头需要以逗号分隔的列表形式包含在上面的标题中。查看 CORS 规范以了解更多详细信息：

http://www.w3.org/TR/cors/

“内容-Type”需要包含在内，因为“application/json”与此处定义的值不匹配：

http://www. w3.org/TR/cors/#terminology

Answer 2

我推荐您 JSONP，它是唯一真正跨浏览器且可靠的跨域 AJAX 解决方案。因此，您可以首先编写一个自定义操作结果，该结果将用回调包装 JSON 响应：

public class JsonpResult : ActionResult
{
    private readonly object _obj;

    public JsonpResult(object obj)
    {
        _obj = obj;
    }

    public override void ExecuteResult(ControllerContext context)
    {
        var serializer = new JavaScriptSerializer();
        var callbackname = context.HttpContext.Request["callback"];
        var jsonp = string.Format("{0}({1})", callbackname, serializer.Serialize(_obj));
        var response = context.HttpContext.Response;
        response.ContentType = "application/json";
        response.Write(jsonp);
    }
}

然后：

public ActionResult AddPerson(Person person)
{
    return new JsonpResult(true);
}

最后执行跨域 AJAX 调用：

$.ajax({
    url: 'http://somedomain.com/Ajax/AddPerson',
    jsonp: 'callback',
    dataType: 'jsonp',
    data: { firstName: 'john', lastName: 'smith' },
    success: function (result) {
        alert(result);
    }
});