使用Jquery调用WEB API和MVC时的跨域问题

      使用Jquery请求API时，某些浏览器下会提示跨域问题：

XMLHttpRequest cannot load http://localhost:25833/api/values/1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
XHR failed loading: GET "http://localhost:25833/api/values/1".

在WEB API中的解决方法：

1. 先设置API返回Json格式：

GlobalConfiguration.Configuration.Formatters.XmlFormatter.SupportedMediaTypes.Clear();

2. 增加跨域特性：

    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);
        }
    }

3. 使用这个特性：

        [AllowCrossSiteJson]
        public HttpResponseMessage Get(int id)
        {
            string json = "{\"result\":\"true\"}";
            return new HttpResponseMessage { Content = new StringContent(json, System.Text.Encoding.UTF8, "application/json") };
        }

在MVC中的解决方法是：

1. 创建一个特性：

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

2. 使用这个特性：

        [AllowCrossSiteJson]
        public JsonResult YourMethod()
        {
            Test t = new Test { Name="aaa",Value="bbb"};
            return Json(t,JsonRequestBehavior.AllowGet);
        }

 

使用Jquery访问代码如：

 

    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $.ajax({
            type:"Get",
            url:"http://localhost:25833/Home/YourMethod",
            dataType: "json",
            success: function (result){
                alert("数据：" + result.Name + "\n状态：" + status);
             }
        });
      });
    });
    </script>

通过上述设置之后可以在IE、火狐、谷歌下面顺利访问。