ASP.NET web api 跨域请求

1.学习文章：AJAX 跨域请求 - JSONP获取JSON数据

1.asp.net代码

参考文章：http://www.sxt.cn/info-2790-u-756.html

（1）.增加CorsHandler类，   

public class CorsHandler : DelegatingHandler

{

        const string Origin = "Origin";

        const string AccessControlRequestMethod = "Access-Control-Request-Method";

        const string AccessControlRequestHeaders = "Access-Control-Request-Headers";

        const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";

        const string AccessControlAllowMethods = "Access-Control-Allow-Methods";

        const string AccessControlAllowHeaders = "Access-Control-Allow-Headers";

        protected override Task<HttpResponseMessage> SendAsync(HttpRequestMessage request, CancellationToken cancellationToken)

        {

            bool isCorsRequest = request.Headers.Contains(Origin);

            bool isPreflightRequest = request.Method == HttpMethod.Options;

            if (isCorsRequest)

            {

                if (isPreflightRequest)

                {

                    return Task.Factory.StartNew<HttpResponseMessage>(() =>

                    {

                        HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);

                        response.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());

                        string accessControlRequestMethod = request.Headers.GetValues(AccessControlRequestMethod).FirstOrDefault();

                        if (accessControlRequestMethod != null)

                        {

                            response.Headers.Add(AccessControlAllowMethods, accessControlRequestMethod);

                        }

                        string requestedHeaders = string.Join(", ", request.Headers.GetValues(AccessControlRequestHeaders));

                        if (!string.IsNullOrEmpty(requestedHeaders))

                        {

                            response.Headers.Add(AccessControlAllowHeaders, requestedHeaders);

                        }

                        return response;

                    }, cancellationToken);

                }

                else

                {

                    return base.SendAsync(request, cancellationToken).ContinueWith<HttpResponseMessage>(t =>

                    {

                        HttpResponseMessage resp = t.Result;

                        resp.Headers.Add(AccessControlAllowOrigin, request.Headers.GetValues(Origin).First());

                        return resp;

                    });

                }

            }

            else

            {

                return base.SendAsync(request, cancellationToken);

            }

        }

    }

 

(2).添加配置

        protected void Application_Start()

        {

            GlobalConfiguration.Configuration.MessageHandlers.Add(new CorsHandler());

　　　　 GlobalConfiguration.Configure(WebApiConfig.Register);

        }

(3).控制器例子

    [RoutePrefix("ajilisiwei")]

    public class ShoppingController : ApiController

    {

        public ShoppingController()

        {

            List<Product> products = new List<Product>() {

                new Product(){Name="Apple",Price="$20/kg"},

                new Product(){Name="Banana",Price="$15/kg"},

                new Product(){Name="Melon",Price="$20/kg"}

            };

            shoppingCart.Name = "MyFruitBaskit";

            shoppingCart.ProductList = products;

        }

 

        [Route("Test")]

        [HttpGet]

        public IEnumerable<Product> GetFruitListByNetJson()

        {

            return shoppingCart.ProductList;

        }

}

(4).js 代码

$.ajax({

url: "http://localhost:1867/ajilisiwei/Test",

        type: "GET",

contentType: "application/json;",

success: function(result) {

                   console.log(result);

               },

               error: function (XMLHttpRequest, textStatus, errorThrown) {

                   alert("出错！XMLHttpRequest:" + XMLHttpRequest.status);

               }

});

 

方法二.jsop

参考文章：ASP.NET中JSONP的两种实现以及其他跨域解决方案的简单实现

(1).Action代码

[Route("TestJsonp")]
        [HttpGet]
        public string GetFruitListByJsonp()
        {
                return new JavaScriptSerializer().Serialize(shoppingCart.ProductList);
        }

(2).js代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./js/jquery.min.js"></script>
</head>
<body>
<script>
    $.getJSON("http://localhost:1867/ajilisiwei/TestJsonp?jsonpcallback=test",  //"test" 这里除了写问号，随便写啥都可以，好奇怪
        function(json) {
            console.log(json);
        }
    );
</script>
</body>
</html>

说明： 还有这种方法。

   $.ajax({
        type: "get",
        url: "http://localhost:1867/ajilisiwei/TestJsonp",
        //dataType: "jsonp",
        jsonp: "jsonpcallback",
        data: "jsonpcallback=？",
        success: function (json) {
            console.log(json);
        }
    });

验证了好久， 不用增加 dataType:"jsonp" 设置。url内容如下：http://localhost:1867/ajilisiwei/TestJsonp?jsonpcallback=?   这是在asp.net  web api下验证的