开发者社区> lampo> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

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

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

随着深入使用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-api-cors-demo-01

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

web-api-cors-demo-02

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

web-api-cors-demo-03

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

web-api-cors-demo-solution-explorer-04

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

web-api-cors-demo-install-jquery-from-nuget-05

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

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类:

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格式的输出,如下:

web-api-cors-demo-xml-06

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

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页面(这个命名自己可以任意取)后打开,修改成如下的代码:

<!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请求结束后,我们会在控制台看到如下结果:

web-api-cors-demo-console-error-07

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,它的依赖包会被自动引用到项目中),如下:

web-api-cors-demo-install-cors-support-08

修改后的WebApiConfig.cs文件如下:

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的控制台,我们可以看到数据跨域加载成功了,如下:

web-api-cors-demo-console-log-result-09

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

几点补充:

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

2.在Web Api的控制器中,我们还对单个Action进行跨域访问限制,只需要在Action上设置EnableCors属性即可,如:

[HttpGet]
[EnableCors("http://example.com","*","*")]
public User GetUser()
{
  return new User { Id = 1, Name = "Admin", Locked = false, CreateOn = DateTime.Now.ToShortDateString() };
}

 

特别注意:以上只是支持Web Api跨域的示例,其中存在安全验证等问题并没有提及。所以,如需要正式的生产项目使用本文的技术,请在需要的时候考虑有关安全验证等问题。安全问题,安全问题,安全问题。。。重要的事情说三遍!!!

 

----------------------------------------------------
专注Web和.NET开发,对前沿技术有深厚的兴趣~~~
个人独立博客图享网--【http://2sharings.com】,欢迎到访。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
SpringMVC之全注解方式进行web开发
在我们之前进行web开发的时候,通常都会有一个web.xml存在,我们会在web.xml里面配置Servlet、Filter等一些web开发相关的东西。
1033 0
Web 开发最有用的50款 jQuery 插件集锦——《图片特效篇》
  《Web 开发最有用的50款 jQuery 插件集锦》系列文章向大家分享最具创新的50款 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件,视频插件等等,将陆续分享给大家,记得关注和收藏啊。
1060 0
PHP和MySQL Web开发 经典书籍
《PHP和MySQL Web开发》 PHP and MySQL Web Development“使用PHP和MySQL构建数据库驱动的Web应用程序的权威指南”   笔者推荐   PHP和MySQL是非常流行的开源技术,它们非常适合快速开发数据库驱动的Web应用。
1296 0
[转载] jQuery Mobile 开发 Web App 系列文章目录
首先是jquery mobile api 的中文站点:http://www.jqmapi.com/  然后下面是网上找的一个很好的教程系列文章,转载如下 --------------------------------------------------------------------...
1035 0
开源中最好的Web开发的资源
文章来源:Best “must know” open sources to build the new Web。个人感觉这个收集贴收集成相当的全。 学习HTML 5编程和设计  HTML5 Rocks : Major Feature Groups  的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码 很不错的 HTML5 Dashboard – Mozilla,效果很炫。
1757 0
Web 开发最有用的50款 jQuery 插件集锦——《内容滑块篇》
  今天给大家带来的是在 Web 项目中常用的内容滑块插件。这个系列的文章将向大家分享50款最具创新的,同时也是最有用的 jQuery 插件,这些插件分成以下类别:网页布局插件,导航插件,表格插件,滑块和转盘插件,图表插件,图片特效插件以及视频插件等等,欢迎大家关注我的后续博文。
1238 0
使用delphi 开发多层应用(十七)使用RTC web 服务器返回JSON
RTC 作为delphi 的最专业的web 应用服务器,如果客户端要使用JSON 的话,那么使用RTC 应该也是一种 非常好的选择。下面我们做一个使用RTC web 服务器返回数据库JSON 的例子。
1699 0
加速Web开发的9款知名HTML5框架
与手工编码比起来,HTML5框架在准确性和正确率方面给予了保证。大多数HTML5框架都会有一个组合或者包含一些额外的组件,比如jQuery Scripts。CSS3样式表则以改善多媒体特征的功能性和响应式的Web布局为主。
1039 0
Web开发百宝箱——提升网站档次的时尚 jQuery 图片滚动插件
  这篇文章向大家推荐8款时尚的 jQuery 图片滚动插件。jQuery 是最流行和使用最广泛的 JavaScript 框架,它可以让帮助你在你的项目中加入一些很炫的图片滚动效果。希望这些插件对你有所帮助,能够帮助你节省时间和精力。
1018 0
+关注
lampo
计算机科学与技术专业,全栈工程师,专注.NET及相关开发,对编码执着,对工作热情,热爱研究前沿技术
文章
问答
文章排行榜
最热
最新
相关电子书
更多
WEB浏览器中即将发生的安全变化
立即下载
Web应用系统性能优化
立即下载
从Web到Cloud App——YunOS Web App 开发经验分享
立即下载