支持Ajax跨域訪問ASP.NET Web Api 2(Cors)的示例教程
隨著深入使用ASP.NET Web Api，我們可能會在項目中考慮將前端的業(yè)務(wù)分得更細。比如前端項目使用Angularjs的框架來做UI，而數(shù)據(jù)則由另一個Web Api 的網(wǎng)站項目來支撐。注意，這里是兩個Web網(wǎng)站項目了，前端項目主要負責界面的呈現(xiàn)和一些前端的相應(yīng)業(yè)務(wù)邏輯處理，而Web Api則負責提供數(shù)據(jù)。
這樣問題就來了，如果前端通過ajax訪問Web Api項目話，就涉及到跨域了。我們知道，如果直接訪問，正常情況下Web Api是不允許這樣做的，這涉及到安全問題。所以，今天我們這篇文章的主題就是討論演示如何配置Web Api以讓其支持跨域訪問（Cors）。好了，下面我們以一個簡單的示例直接進入本文的主題。
首先打開Visual Studio 2013,創(chuàng)建一個空白的解決方案，命名為：CrossDomainAccessWebAPI。
再創(chuàng)建一個空的Web Api項目，命名為：CrossDomainAccess.WebAPI
接著我們右鍵單擊剛才創(chuàng)建的解決方案,創(chuàng)建一個空的Web項目用來模擬我們的網(wǎng)站對WebAPI項目進行跨域調(diào)用，如下：
完成以上步驟以后，我們的解決方案目錄如下圖所示：
下面我們在模擬網(wǎng)站的Web項目中通過Nuget添加jQuery，一下是添加jQuery包的界面：
添加完成后，到這里我們就完成了前期的準備工作。下面在WebAPI項目的Models文件夾中添加是一個實體類UserInfo,具體代碼如下：
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，這個控制器用來返回數(shù)據(jù)集合，具體代碼如下：
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()
{
//對象集合模擬數(shù)據(jù)
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的路由規(guī)則，以便通過api/{controller}/{action}的方式進行訪問，同時讓修改序列化方式，讓WebAPI默認輸出json格式的數(shù)據(jù)，具體操作如下：
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 配置和服務(wù)
// 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());
}
}
}
重新生成一下項目，并在瀏覽器中訪問，這時我們可以的到j(luò)son格式的數(shù)據(jù)，如下：
好了，到這里我們Web Api端的數(shù)據(jù)輸出就準備好了。為了測試是否可以跨域訪問，我們再轉(zhuǎn)到CorsDemo.UI網(wǎng)站項目中。首先創(chuàng)建一個index.aspx頁面（這個命名自己可以任意?。┖蟠蜷_，修改成如下的代碼：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="CrossDomainAccess.Web.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="Scripts/jquery-2.2.3.min.js"></script>
<script type="text/javascript">
$(function () {
$('#getData').click(function () {
$.ajax({
url: 'http://localhost:29867/api/UserInfo/getlist',
dataType: 'json',
success: function (data) {
//以表格的形式在瀏覽器控制臺顯示數(shù)據(jù),IE下不支持
console.table(data);
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="跨域獲取數(shù)據(jù)" id="getData" />
</div>
</form>
</body>
</html>
完成以上步驟以后，啟動WebAPI項目和Web項目，并在Web項目的Index頁面中點擊跨域獲取數(shù)據(jù)按鈕，打開瀏覽器控制臺查看請求結(jié)果，在控制臺會出現(xiàn)如下結(jié)果：
控制臺提示我們跨域請求被阻止，同時提示CORS頭部信息確實，所以我們可以通過去WebAPI配置CORS來讓其支持跨域訪問。
那現(xiàn)在我們在WebAPI項目中通過Nuget添加Microsoft.AspNet.WebApi.Cors ,然后在WebApiConfig.cs文件中配置HttpConfiguration的EnableCors方法即可。具體操作如下：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net.Http.Formatting;
using System.Web.Http;
using System.Web.Http.Cors;
namespace CrossDomainAccess.WebAPI
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// Web API 配置和服務(wù)
EnableCrossSiteRequests(config);
// 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());
}
/// <summary>
/// 允許跨域調(diào)用
/// </summary>
/// <param name="config"></param>
private static void EnableCrossSiteRequests(HttpConfiguration config)
{
//對所有的請求來源沒有任何限制
var cors = new EnableCorsAttribute(
origins: "*",
headers: "*",
methods: "*"
);
config.EnableCors(cors);
}
}
}
現(xiàn)在，我們再重新生成WebAPI項目并運行，接著在頁面http://localhost:31521/Index.aspx中點擊按鈕“跨域獲取數(shù)據(jù)”，通過firebug的控制臺，我們可以看到數(shù)據(jù)跨域加載成功了，如下：
更多精彩內(nèi)容，請點擊《ajax跨域技術(shù)匯總》，進行深入學習和研究。
至此，關(guān)于ASP.Net Web Api支持跨域請求的示例和演示就完成了，謝謝大家的閱讀。
相關(guān)文章
ASP.NET實現(xiàn)將word文檔轉(zhuǎn)換成pdf的方法
這篇文章主要介紹了ASP.NET實現(xiàn)將word文檔轉(zhuǎn)換成pdf的方法,包含了兩種實現(xiàn)方法進行比對分析,非常具有實用價值,需要的朋友可以參考下2014-10-10
ASP.NET MVC中使用log4net的實現(xiàn)示例
這篇文章主要介紹了ASP.NET MVC中使用log4net的實現(xiàn)示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-01-01
DataGridView中綁定DataTable數(shù)據(jù)及相關(guān)操作實現(xiàn)代碼
DataGridView中綁定DataTable數(shù)據(jù)及相關(guān)操作2010-02-02
本篇文章主要介紹了詳解ASP.NET Core 2.0 視圖引擎(譯)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
asp.net BOF或EOF有一個是真，或者當前記錄已被刪除
在調(diào)試“學生管理系統(tǒng)”時，想修改學籍信息，如果此時數(shù)據(jù)庫中的數(shù)據(jù)已被完全刪除則會出現(xiàn)“BoF 或Eof有一個是真，或當前記錄已被刪除的錯誤2009-07-07
visual studio 2017企業(yè)版本安裝（附序列號）
這篇文章主要介紹了visual studio 2017企業(yè)版本安裝，文末為大家分享了序列號，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
asp.net中js和jquery調(diào)用ashx的不同方法分享
asp.net中js和jquery調(diào)用ashx的不同方法分享，需要的朋友可以參考一下2013-06-06
這篇文章主要介紹了.NET Core中實現(xiàn)ObjectId反解的方法，文中講解非常細致，代碼幫助大家更好的理解和學習，感興趣的朋友可以了解下2020-08-08
這篇文章主要介紹了Asp.Mvc?2.0實現(xiàn)客戶端驗證功能，本文使用jquery.validate插件進行驗證，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-08-08
這篇文章主要介紹了ASP.NET實現(xiàn)電影票信息的增刪查改功能的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2016-12-12