女主播福利一区,精品成人自拍视频,国产美女精品视频免费播放软件

主頁 > 知識庫 > 支持Ajax跨域訪問ASP.NET Web Api 2(Cors)的示例教程

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

隨著深入使用ASP.NET Web Api，我們可能會在項目中考慮將前端的業(yè)務分得更細。比如前端項目使用Angularjs的框架來做UI，而數(shù)據(jù)則由另一個Web Api 的網(wǎng)站項目來支撐。注意，這里是兩個Web網(wǎng)站項目了，前端項目主要負責界面的呈現(xiàn)和一些前端的相應業(yè)務邏輯處理，而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ù)
   ListUserInfo> list = new ListUserInfo>()
   {
    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 配置和服務

   // 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ù)，如下：

復制代碼代碼如下:

[{"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端的數(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 配置和服務
   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支持跨域請求的示例和演示就完成了，謝謝大家的閱讀。

您可能感興趣的文章:

創(chuàng)建一個完整的ASP.NET Web API項目
ASP.NET中Web API的簡單實例
ASP.NET MVC Web API HttpClient簡介
ASP.NET Web Api 2實現(xiàn)多文件打包并下載文件的實例
ASP.NET Web API教程創(chuàng)建Admin視圖詳細介紹
ASP.NET Web API如何將注釋自動生成幫助文檔
ASP.NET Web API教程創(chuàng)建Admin控制器實例分享
ASP.NET Web API教程創(chuàng)建域模型的方法詳細介紹
.Net Web Api中利用FluentValidate進行參數(shù)驗證的方法

標簽：吉林麗江汕頭重慶河南本溪婁底宜春

巨人網(wǎng)絡(luò)通訊聲明：本文標題《支持Ajax跨域訪問ASP.NET Web Api 2(Cors)的示例教程》，本文關(guān)鍵詞支持,Ajax,跨域,訪問,ASP.NET,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請?zhí)峁┫嚓P(guān)信息告之我們，我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。