当前位置：Gxlcms > asp.net > 支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程

支持Ajax跨域访问ASP.NET Web Api 2(Cors)的示例教程

时间：2021-07-01 10:21:17 帮助过：6人阅读

随着深入使用ASP.NET Web Api，我们可能会在项目中考虑将前端的业务分得更细。比如前端项目使用Angularjs的框架来做UI，而数据则由另一个Web Api 的网站项目来支撑。注意，这里是两个Web网站项目了，前端项目主要负责界面的呈现和一些前端的相应业务逻辑处理，而Web Api则负责提供数据。

这样问题就来了，如果前端通过ajax访问Web Api项目话，就涉及到跨域了。我们知道，如果直接访问，正常情况下Web Api是不允许这样做的，这涉及到安全问题。所以，今天我们这篇文章的主题就是讨论演示如何配置Web Api以让其支持跨域访问（Cors）。好了，下面我们以一个简单的示例直接进入本文的主题。

首先打开Visual Studio 2013,创建一个空白的解决方案，命名为：CrossDomainAccessWebAPI。

再创建一个空的Web Api项目，命名为：CrossDomainAccess.WebAPI

接着我们右键单击刚才创建的解决方案,创建一个空的Web项目用来模拟我们的网站对WebAPI项目进行跨域调用，如下：

完成以上步骤以后，我们的解决方案目录如下图所示：

下面我们在模拟网站的Web项目中通过Nuget添加jQuery，一下是添加jQuery包的界面：

添加完成后，到这里我们就完成了前期的准备工作。下面在WebAPI项目的Models文件夹中添加是一个实体类UserInfo,具体代码如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Web;
  5. namespace CrossDomainAccess.WebAPI.Models
  6. {
  7.  public class UserInfo
  8.  {
  9.   public int Id { get; set; }
  10.   public string UserName { get; set; }
  11.   public string UserPass { get; set; }
  12.   public string Email { get; set; }
  13.   public DateTime RegTime { get; set; }
  14.  }
  15. }

然后在WebAPI项目中添加一个示例控制器：UserInfoController，这个控制器用来返回数据集合，具体代码如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net;
  5. using System.Net.Http;
  6. using System.Web.Http;
  7. using CrossDomainAccess.WebAPI.Models;
  8. namespace CrossDomainAccess.WebAPI.Controllers
  9. {
  10.  public class UserInfoController : ApiController
  11.  {
  12.   /// <summary>
  13.   /// 获取用户信息集合的方法
  14.   /// </summary>
  15.   /// <returns>返回用户信息集合</returns>
  16.   public IHttpActionResult GetList()
  17.   {
  18.    //对象集合模拟数据
  19.    List<UserInfo> list = new List<UserInfo>()
  20.    {
  21.     new UserInfo()
  22.     {
  23.      Id = 1,
  24.      UserName = "张三",
  25.      UserPass = "FDASDFAS",
  26.      Email = "zhangsan@163.com",
  27.      RegTime = DateTime.Now
  28.     },
  29.     new UserInfo()
  30.     {
  31.      Id = 2,
  32.      UserName = "李四",
  33.      UserPass = "FDASDFAS",
  34.      Email = "lisi@163.com",
  35.      RegTime = DateTime.Now
  36.     },
  37.     new UserInfo()
  38.     {
  39.      Id = 3,
  40.      UserName = "王五",
  41.      UserPass = "FDASDFAS",
  42.      Email = "wangwu@163.com",
  43.      RegTime = DateTime.Now
  44.     },
  45.     new UserInfo()
  46.     {
  47.      Id = 4,
  48.      UserName = "赵六",
  49.      UserPass = "FDASDFAS",
  50.      Email = "zhaoliu@163.com",
  51.      RegTime = DateTime.Now
  52.     },
  53.     new UserInfo()
  54.     {
  55.      Id = 5,
  56.      UserName = "田七",
  57.      UserPass = "FDASDFAS",
  58.      Email = "tianqi@163.com",
  59.      RegTime = DateTime.Now
  60.     },
  61.     new UserInfo()
  62.     {
  63.      Id = 6,
  64.      UserName = "王八",
  65.      UserPass = "FDASDFAS",
  66.      Email = "wangba@163.com",
  67.      RegTime = DateTime.Now
  68.     }
  69.    };
  70.    return Ok(list);
  71.   }
  72.  }
  73. }

接着我们需要修改一下App_Start目录下的WebApiConfig.cs文件中webapi的路由规则，以便通过api/{controller}/{action}的方式进行访问，同时让修改序列化方式，让WebAPI默认输出json格式的数据，具体操作如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net.Http.Formatting;
  5. using System.Web.Http;
  6. namespace CrossDomainAccess.WebAPI
  7. {
  8.  public static class WebApiConfig
  9.  {
  10.   public static void Register(HttpConfiguration config)
  11.   {
  12.    // Web API 配置和服务
  13.    // Web API 路由
  14.    config.MapHttpAttributeRoutes();
  15.    config.Routes.MapHttpRoute(
  16.     name: "DefaultApi",
  17.     routeTemplate: "api/{controller}/{action}/{id}",
  18.     defaults: new { id = RouteParameter.Optional }
  19.    );
  20.    //清除所有序列化格式
  21.    config.Formatters.Clear();
  22.    //添加Json格式的序列化器
  23.    config.Formatters.Add(new JsonMediaTypeFormatter());
  24.   }
  25.  }
  26. }

重新生成一下项目，并在浏览器中访问，这时我们可以的到json格式的数据，如下：

代码如下:[{"Id":1,"UserName":"张三","UserPass":"FDASDFAS","Email":"zhangsan@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":2,"UserName":"李四","UserPass":"FDASDFAS","Email":"lisi@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":3,"UserName":"王五","UserPass":"FDASDFAS","Email":"wangwu@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":4,"UserName":"赵六","UserPass":"FDASDFAS","Email":"zhaoliu@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":5,"UserName":"田七","UserPass":"FDASDFAS","Email":"tianqi@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"},{"Id":6,"UserName":"王八","UserPass":"FDASDFAS","Email":"wangba@163.com","RegTime":"2016-04-21T10:36:50.7800569+08:00"}]

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

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CrossDomainAccess.Web.Index" %>
  2. <!DOCTYPE html>
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4. <head runat="server">
  5.  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.  <title></title>
  7.  <script src="Scripts/jquery-2.2.3.min.js"></script>
  8.  <script type="text/javascript">
  9.   $(function () {
  10.    $('#getData').click(function () {
  11.     $.ajax({
  12.      url: 'http://localhost:29867/api/UserInfo/getlist',
  13.      dataType: 'json',
  14.      success: function (data) {
  15.       //以表格的形式在浏览器控制台显示数据,IE下不支持
  16.       console.table(data);
  17.      }
  18.     });
  19.    });
  20.   });
  21.  </script>
  22. </head>
  23. <body>
  24.  <form id="form1" runat="server">
  25.   <div>
  26.    <input type="button" value="跨域获取数据" id="getData" />
  27.   </div>
  28.  </form>
  29. </body>
  30. </html>

完成以上步骤以后，启动WebAPI项目和Web项目，并在Web项目的Index页面中点击跨域获取数据按钮，打开浏览器控制台查看请求结果，在控制台会出现如下结果：

控制台提示我们跨域请求被阻止，同时提示CORS头部信息确实，所以我们可以通过去WebAPI配置CORS来让其支持跨域访问。

那现在我们在WebAPI项目中通过Nuget添加Microsoft.AspNet.WebApi.Cors ,然后在WebApiConfig.cs文件中配置HttpConfiguration的EnableCors方法即可。具体操作如下：

  1. using System;
  2. using System.Collections.Generic;
  3. using System.Linq;
  4. using System.Net.Http.Formatting;
  5. using System.Web.Http;
  6. using System.Web.Http.Cors;
  7. namespace CrossDomainAccess.WebAPI
  8. {
  9.  public static class WebApiConfig
  10.  {
  11.   public static void Register(HttpConfiguration config)
  12.   {
  13.    // Web API 配置和服务
  14.    EnableCrossSiteRequests(config);
  15.    // Web API 路由
  16.    config.MapHttpAttributeRoutes();
  17.    config.Routes.MapHttpRoute(
  18.     name: "DefaultApi",
  19.     routeTemplate: "api/{controller}/{action}/{id}",
  20.     defaults: new { id = RouteParameter.Optional }
  21.    );
  22.    //清除所有序列化格式
  23.    config.Formatters.Clear();
  24.    //添加Json格式的序列化器
  25.    config.Formatters.Add(new JsonMediaTypeFormatter());
  26.   }
  27.   /// <summary>
  28.   /// 允许跨域调用
  29.   /// </summary>
  30.   /// <param name="config"></param>
  31.   private static void EnableCrossSiteRequests(HttpConfiguration config)
  32.   {
  33.    //对所有的请求来源没有任何限制
  34.    var cors = new EnableCorsAttribute(
  35.     origins: "*",
  36.     headers: "*",
  37.     methods: "*"
  38.     );
  39.    config.EnableCors(cors);
  40.   }
  41.  }
  42. }

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

更多精彩内容，请点击《ajax跨域技术汇总》，进行深入学习和研究。

至此，关于ASP.Net Web Api支持跨域请求的示例和演示就完成了，谢谢大家的阅读。

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！