支持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主要是为了美化我们的界面的，只需要一两个css class就能制作出一个精美漂亮的按钮，下文你将看到）。以下是添加jQuery包的界面：
按照上图方法引用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格式的输出，如下：
我们修改一下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请求结束后，我们会在控制台看到如下结果：
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文件如下：
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属性即可，如：
[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)的简单示例教程演示的更多相关文章
- Web Api 2(Cors)Ajax跨域访问
支持Ajax跨域访问ASP.NET Web Api 2(Cors)的简单示例教程演示 随着深入使用ASP.NET Web Api,我们可能会在项目中考虑将前端的业务分得更细.比如前端项目使用Ang ...
- Ajax跨域Post方法调用Web Api(NuGet配置的环境)
没安装的去NuGet安装, 然后安装, 建立Web Api项目.需要在里的WebApiConfig.cs里配置 config.EnableSystemDiagnosticsTracing(); //感 ...
- 如何通过js跨域调用ASP.NET Web API （请问如何实现在javascript中通过http get的方式跨域调用ASP.NET Web API？）
客户端js无需任何专门设置,使用通常的ajax调用即可: $.ajax({ url: '跨域URL', type: 'get', dataType: 'json', success: function ...
- ajax跨域访问的解决方案
今天的工作中要访问摄像机内部的一个web站点,这就涉及到jquery的ajax跨域访问的问题.我使用的是jquery1.7的版本,下面总结如下: 问题一:一开始用IE调试,总是返回No Transpo ...
- WebApi 自定义过滤器实现支持AJAX跨域的请求
我想关于此类话题的文章,大家一搜铺天盖地都是,我写此文的目的,只是对自己学习过程的记录,能对需要的朋友有所帮助,也百感荣幸!!!废话不多说,直接上代码! 客户端:很简单的AJAX请求 <html ...
- Ajax跨域访问解决办法
方法1. jsonp实现ajax跨域访问示例 jsp代码: <body> <input type="button" onclick="testJsonp ...
- AJAX跨域调用ASP.NET MVC或者WebAPI服务
关于AJAX跨域调用ASP.NET MVC或者WebAPI服务的问题及解决方案 作者:陈希章 时间:2014-7-3 问题描述 当跨域(cross domain)调用ASP.NET MVC或者ASP. ...
- 支持ajax跨域调用的WCF搭建示例
支持ajax 跨域调用的WCF搭建 1.新建一个"ASP.NET空Web应用程序"项目. 2.新建一个“WCF服务(支持ajax)”. 3.修改WCFAjaxService.svc ...
- 关于JQuery Ajax 跨域 访问.net WebService
关于这个 jQuery Ajax跨域访问 WebService 前天整了好几个小时没整明白 今天再看一下 结果突然就顿悟了 1.建一个空webApplication --添加--新建项--web服务( ...
随机推荐
- 学习HTML5必读之《HTML5设计原理》
引子:很久前看过的一遍受益匪浅的文章,今天再次转过来,希望对学习HTML5的朋友有所帮助. 今天我想跟大家谈一谈HTML5的设计.主要分两个方面:一方面,当然了,就是HTML5.我可以站在这儿只讲HT ...
- 利用文本编辑器输入Hello.java，并在JDK环境下编译和运行。请将程序编译、运行的结果
- 基于Cookie的SSO登录分析和实现
什么是SSO? 现在很多大的互联网公司都会有很多的应用,比如以下是淘宝网的截图: 天猫 聚划算 头条等都是不同的应用,有的甚至采用完全不同的域名,但是所有在淘宝注册的用户都是使用的一套用户名和口令,如 ...
- 50个jquery代码片段(转)
本文会给你们展示50个jquery代码片段,这些代码能够给你的javascript项目提供帮助.其中的一些代码段是从jQuery1.4.2才开始支持的做法,另一些则是真正有用的函数或方法,他们能够帮助 ...
- Centos 下oracle 11g 安装部署及手动建库过程
Oracle 11g 手动建库,在虚拟环境中,不使用DBCA工具进行创建数据库 1.Linux环境的基本配置 2.ip 10.11.30.60 3.Oracle 11g安装过程 ---------- ...
- Go
一.简介 https://zh.wikipedia.org/wiki/Go 二.安装 1)低版本 http://blog.sina.com.cn/s/blog_59cc90640102xm8r.htm ...
- php类型转换以及类型转换的判别
部分摘自PHP: 类型 - Manual 相关链接 PHP 在变量定义中不需要(或不支持)明确的类型定义:变量类型是根据使用该变量的上下文所决定的.也就是说,如果把一个 string 值赋给变量 $v ...
- js清除缓存方法
1.加入如下头描述 <META HTTP-EQUIV="Pragma" CONTENT="no-cache"> <META HTTP-EQUI ...
- 20150912华为机考2之"输入一段字符串(英文)，将每个单词首字母大写后输出"
还有其他一些(隐性)要求(要不然无法通过测试): .如果首字母已经大写,则不用变 .不是英文字母的不变 e.g. Input: hello world! this is _Ljj speaking! ...
- 【SQL 代码】Sql分页（自用）
效果图: 下面是存储过程的创建,用的时候调用就行了 /****** Object: StoredProcedure [dbo].[spSqlPageByRownumber] Script Date: ...