苏飞论坛

标题: 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 [打印本页]

作者: lampo 时间: 2015-10-29 08:52
标题: 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示
随着深入使用ASP.NET Web Api，我们可能会在项目中考虑将前端的业务分得更细。比如前端项目使用Angularjs的框架来做UI，而数据则由另一个Web Api 的网站项目来支撑。注意，这里是两个Web网站项目了，前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理，而Web Api则负责提供数据。
这样问题就来了，如果前端通过ajax访问Web Api项目话，就涉及到跨域了。我们知道，如果直接访问，正常情况下Web Api是不允许这样做的，这涉及到安全问题。所以，今天我们这篇文章的主题就是讨论演示如何配置Web Api以让其支持跨域访问（Cors）。好了，下面我们以一个简单的示例直接进入本文的主题。
首先打开Visual Studio 2013,创建一个空白的解决方案，命名为：Solution.Cors。
再创建一个空的Web Api 项目，命名为：CorsDemo.Api，如下图：

接着我们右键单击刚才创建的解决方案，如下：

创建一个空的Web网站，命名为：CorsDemo.UI，如下：

好了，完成以上步骤，你将看到如下的解决方案目录：

下面我们在CorsDemo.UI的网站项目中通过Nuget程序包管理工具来添加我们需要的jQuery和Bootstrap包（引入Bootstrap主要是为了美化我们的界面的，只需要一两class就能制作一个漂亮的按钮，下文你将看到）。以下是添加jQuery包的界面：

按照上图方法引用Bootstrap。到这里，我们的准备工作就完成了。下面开始创建一个Web Api的示例控制器:UserController,这个救命控制器中只有一个返回IEnumerable<T>的方法，具体代码如下：

[C#] 纯文本查看 复制代码

using CorsDemo.Api.Models;

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net;

using System.Net.Http;

using System.Web.Http;



namespace CorsDemo.Api.Controllers

{

  [RoutePrefix("api/user")]

  public class UserController : ApiController

  {

    [HttpGet, Route("list")]

    public IEnumerable<User> GetUserList()

    {

      return new List<User> { 

        new User{Id=1,Name="Admin",Locked=false,CreateOn=DateTime.Now.ToShortDateString()},

        new User{Id=2,Name="Peter",Locked=false,CreateOn=DateTime.Now.ToShortDateString()},

        new User{Id=3,Name="Employee",Locked=true,CreateOn=DateTime.Now.ToShortDateString()}

      };

    }

  }

}

User类：

[C#] 纯文本查看 复制代码

namespace CorsDemo.Api.Models

{

  public class User

  {

    public int Id { get; set; }

    public string Name { get; set; }

    public string CreateOn { get; set; }

    public bool Locked { get; set; }

  }

}

如果我们现在运行CorsDemo.Api这个项目，并打开：http://localhost:4543/api/user/list这个地址，我们将在浏览器中看到XML格式的输出，如下：

我们修改一下App_Start目录下的WebApiConfig.cs文件，让其他默认输出json格式的数据，如下：

[C#] 纯文本查看 复制代码

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net.Http.Headers;

using System.Web.Http;



namespace CorsDemo.Api

{

  public static class WebApiConfig

  {

    public static void Register(HttpConfiguration config)

    {

      // Web API 配置和服务



      // Web API 路由

      config.MapHttpAttributeRoutes();



      config.Routes.MapHttpRoute(

          name: "DefaultApi",

          routeTemplate: "api/{controller}/{id}",

          defaults: new { id = RouteParameter.Optional }

      );

      config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

    }

  }

}

重新生成CorsDemo.Api项目并打开http://localhost:4543/api/user/list，这时我们可以得到json的数据，如下：

[{“Id”:1,”Name”:”Admin”,”CreateOn”:”2015/10/26″,”Locked”:false},{“Id”:2,”Name”:”Peter”,”CreateOn”:”2015/10/26″,”Locked”:false},{“Id”:3,”Name”:”Employee”,”CreateOn”:”2015/10/26″,”Locked”:true}]

好了，到这里我们Web Api端的数据输出就准备好了。为了测试是否可以跨域访问，我们再转到CorsDemo.UI网站项目中。首先创建一个cors-demo.html页面（这个命名自己可以任意取）后打开，修改成如下的代码：

[C#] 纯文本查看 复制代码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>Web Api 2 Cors Demo</title>

  <link href="Content/bootstrap.css" rel="stylesheet" />

  <script src="Scripts/jquery-1.9.1.js"></script>

  <script src="Scripts/bootstrap.js"></script>

</head>

<body>

  <a class="btn btn-primary" id="getData">跨域获取数据</a>

  <script type="text/javascript">

    $("#getData").click(function () {

      $.ajax({

        url: "http://localhost:4543/api/user/list",

        success: function (response) {

          console.log(response);

        }

      });

    });

  </script>

</body>

</html>

完成以下步骤后，我们在Visual Studio中cors-demo.html上右键单击，在弹出的窗口中选择“在浏览器中查看”，Visual Studio会自动在默认的浏览器（我这里的浏览器是Firefox）中打开cors-demo.html这个页面。为了测试，我们先点击一下这个页面中的“跨域获取数据”这个按钮（为了查看此时Web Api是否支持跨域访问，我们需先打Firefox的firebug插件，并定位到“控制台”选项卡）。
ajax请求结束后，我们会在控制台看到如下结果：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4543/api/user/list. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
怎么样，是不是提示我们：跨域请求被阻止，同时提示CORS头部信息缺失，所以我们可以去Web Api配置CORS来让其支持跨域访问。
那现在我们就到CorsDemo.Api这个项目中去配置关于CORS的支持。不需要太多，在WebApiConfig.cs文件中配置HttpConfiguration的EnableCors方法即可。在修改配置前，我们需要通过Nuget来新增一些引用（Microsoft.AspNet.WebApi.Cors ），如下：

，修改后的WebApiConfig.cs文件如下：

[C#] 纯文本查看 复制代码

using System;

using System.Collections.Generic;

using System.Linq;

using System.Net.Http.Headers;

using System.Web.Http;

using System.Web.Http.Cors;



namespace CorsDemo.Api

{

  public static class WebApiConfig

  {

    public static void Register(HttpConfiguration config)

    {

      // Web API 配置和服务

      EnableCrossSiteRequests(config);

      // Web API 路由

      config.MapHttpAttributeRoutes();



      config.Routes.MapHttpRoute(

          name: "DefaultApi",

          routeTemplate: "api/{controller}/{id}",

          defaults: new { id = RouteParameter.Optional }

      );

      config.Formatters.JsonFormatter.SupportedMediaTypes.Add(new MediaTypeHeaderValue("text/html"));

    }



    private static void EnableCrossSiteRequests(HttpConfiguration config)

    {

      var cors = new EnableCorsAttribute(

        origins: "*",

        headers: "*",

        methods: "*"

        );

      config.EnableCors(cors);

    }

  }

}

现在，我们再重新生成CorsDemo.Api项目并运行，接着在页面http://localhost:4631/cors-demo.html中点击按钮“跨域获取数据”，通过firebug的控制台，我们可以看到数据跨域加载成功了，如下：

好了，这篇关于ASP.NET Web Api支持跨域请求的示例和演示就完成了。

几点补充：

1.EnableCorsAttribute构造函数中的参数可以根据自己情况进行设置，比如origins，当其为”*”时，所以的域都可访问api的资源，如果你只想要指定的域可访问资源，则指定到具体的域即可

2.在Web Api的控制器中，我们还对单个Action进行跨域访问限制，只需要在Action上设置EnableCors属性即可，如：
[C#] 纯文本查看 复制代码
[HttpGet]

[EnableCors("http://example.com","*","*")]

public User GetUser()

{

  return new User { Id = 1, Name = "Admin", Locked = false, CreateOn = DateTime.Now.ToShortDateString() };

}

特别注意：以上只是支持Web Api跨域的示例，其中存在安全验证等问题并没有提及。所以，如需要正式的生产项目使用本文的技术，请在需要的时候考虑有关安全验证等问题。
本文同步发布至：图享网 » 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示

作者: 站长苏飞 时间: 2015-10-29 09:44
我只是路过打酱油的。

作者: lampo 时间: 2015-11-3 13:06

站长苏飞发表于 2015-10-29 09:44
我只是路过打酱油的。

谢谢支持~~~

欢迎光临苏飞论坛 (http://www.sufeinet.com/)