源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2021-09-12 08:28 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:支持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,创建一个空白的解决方案,命名为:CrossDomainAccessWebAPI。 再创建一个空的Web Api项目,命名为:CrossDomainAccess.WebAPI [img]http://files.jb51.net/file_images/article/201604/201604211426001.png[/img] 接着我们右键单击刚才创建的解决方案,创建一个空的Web项目用来模拟我们的网站对WebAPI项目进行跨域调用,如下: [img]http://files.jb51.net/file_images/article/201604/201604211426002.png[/img] 完成以上步骤以后,我们的解决方案目录如下图所示: [img]http://files.jb51.net/file_images/article/201604/201604211426003.png[/img] 下面我们在模拟网站的Web项目中通过Nuget添加jQuery,一下是添加jQuery包的界面: [img]http://files.jb51.net/file_images/article/201604/201604211426004.png[/img] 添加完成后,到这里我们就完成了前期的准备工作。下面在WebAPI项目的Models文件夹中添加是一个实体类UserInfo,具体代码如下: [img]http://files.jb51.net/file_images/article/201604/201604211426005.png[/img]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace CrossDomainAccess.WebAPI.Models
{
 public class UserInfo
 {
  public int Id { get; set; }

  public string UserName { get; set; }

  public string UserPass { get; set; }

  public string Email { get; set; }

  public DateTime RegTime { get; set; }
 }
}

然后在WebAPI项目中添加一个示例控制器:UserInfoController,这个控制器用来返回数据集合,具体代码如下: [img]http://files.jb51.net/file_images/article/201604/201604211426016.png[/img] [img]http://files.jb51.net/file_images/article/201604/201604211426017.png[/img]
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using CrossDomainAccess.WebAPI.Models;

namespace CrossDomainAccess.WebAPI.Controllers
{
 public class UserInfoController : ApiController
 {
  /// <summary>
  /// 获取用户信息集合的方法
  /// </summary>
  /// <returns>返回用户信息集合</returns>
  public IHttpActionResult GetList()
  {
   //对象集合模拟数据
   List<UserInfo> list = new List<UserInfo>()
   {
    new UserInfo()
    {
     Id = 1,
     UserName = "张三",
     UserPass = "FDASDFAS",
     Email = "zhangsan@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 2,
     UserName = "李四",
     UserPass = "FDASDFAS",
     Email = "lisi@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 3,
     UserName = "王五",
     UserPass = "FDASDFAS",
     Email = "wangwu@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 4,
     UserName = "赵六",
     UserPass = "FDASDFAS",
     Email = "zhaoliu@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 5,
     UserName = "田七",
     UserPass = "FDASDFAS",
     Email = "tianqi@163.com",
     RegTime = DateTime.Now
    },
    new UserInfo()
    {
     Id = 6,
     UserName = "王八",
     UserPass = "FDASDFAS",
     Email = "wangba@163.com",
     RegTime = DateTime.Now
    }
   };
   return Ok(list);
  }
 }
}
接着我们需要修改一下App_Start目录下的WebApiConfig.cs文件中webapi的路由规则,以便通过api/{controller}/{action}的方式进行访问,同时让修改序列化方式,让WebAPI默认输出json格式的数据,具体操作如下:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http.Formatting;
using System.Web.Http;

namespace CrossDomainAccess.WebAPI
{
 public static class WebApiConfig
 {
  public static void Register(HttpConfiguration config)
  {
   // Web API 配置和服务

   // Web API 路由
   config.MapHttpAttributeRoutes();

   config.Routes.MapHttpRoute(
    name: "DefaultApi",
    routeTemplate: "api/{controller}/{action}/{id}",
    defaults: new { id = RouteParameter.Optional }
   );
   //清除所有序列化格式
   config.Formatters.Clear();
   //添加Json格式的序列化器
   config.Formatters.Add(new JsonMediaTypeFormatter());
  }
 }
}
重新生成一下项目,并在浏览器中访问,这时我们可以的到json格式的数据,如下:
[url=http://www.1sucai.cn/Special/894.htm]《ajax跨域技术汇总》[/url],进行深入学习和研究。 至此,关于ASP.Net Web Api支持跨域请求的示例和演示就完成了,谢谢大家的阅读。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部