欧美日韩国产另类一区二区三区,亚洲欧美一区二区三区孕妇,竹菊影视欧美日韩一区二区三区四区五区

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

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

隨著深入使用ASP.NET Web Api，我們可能會在項(xiàng)目中考慮將前端的業(yè)務(wù)分得更細(xì)。比如前端項(xiàng)目使用Angularjs的框架來做UI，而數(shù)據(jù)則由另一個(gè)Web Api 的網(wǎng)站項(xiàng)目來支撐。注意，這里是兩個(gè)Web網(wǎng)站項(xiàng)目了，前端項(xiàng)目主要負(fù)責(zé)界面的呈現(xiàn)和一些前端的相應(yīng)業(yè)務(wù)邏輯處理，而Web Api則負(fù)責(zé)提供數(shù)據(jù)。

這樣問題就來了，如果前端通過ajax訪問Web Api項(xiàng)目話，就涉及到跨域了。我們知道，如果直接訪問，正常情況下Web Api是不允許這樣做的，這涉及到安全問題。所以，今天我們這篇文章的主題就是討論演示如何配置Web Api以讓其支持跨域訪問（Cors）。好了，下面我們以一個(gè)簡單的示例直接進(jìn)入本文的主題。

首先打開Visual Studio 2013,創(chuàng)建一個(gè)空白的解決方案，命名為：CrossDomainAccessWebAPI。

再創(chuàng)建一個(gè)空的Web Api項(xiàng)目，命名為：CrossDomainAccess.WebAPI

接著我們右鍵單擊剛才創(chuàng)建的解決方案,創(chuàng)建一個(gè)空的Web項(xiàng)目用來模擬我們的網(wǎng)站對WebAPI項(xiàng)目進(jìn)行跨域調(diào)用，如下：

完成以上步驟以后，我們的解決方案目錄如下圖所示：

下面我們在模擬網(wǎng)站的Web項(xiàng)目中通過Nuget添加jQuery，一下是添加jQuery包的界面：

添加完成后，到這里我們就完成了前期的準(zhǔn)備工作。下面在WebAPI項(xiàng)目的Models文件夾中添加是一個(gè)實(shí)體類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項(xiàng)目中添加一個(gè)示例控制器：UserInfoController，這個(gè)控制器用來返回?cái)?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}的方式進(jìn)行訪問，同時(shí)讓修改序列化方式，讓W(xué)ebAPI默認(rèn)輸出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());
  }
 }
}

重新生成一下項(xiàng)目，并在瀏覽器中訪問，這時(shí)我們可以的到j(luò)son格式的數(shù)據(jù)，如下：

復(fù)制代碼代碼如下:

[{"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ù)輸出就準(zhǔn)備好了。為了測試是否可以跨域訪問，我們再轉(zhuǎn)到CorsDemo.UI網(wǎng)站項(xiàng)目中。首先創(chuàng)建一個(gè)index.aspx頁面（這個(gè)命名自己可以任意取）后打開，修改成如下的代碼：

%@ 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項(xiàng)目和Web項(xiàng)目，并在Web項(xiàng)目的Index頁面中點(diǎn)擊跨域獲取數(shù)據(jù)按鈕，打開瀏覽器控制臺查看請求結(jié)果，在控制臺會出現(xiàn)如下結(jié)果：

控制臺提示我們跨域請求被阻止，同時(shí)提示CORS頭部信息確實(shí)，所以我們可以通過去WebAPI配置CORS來讓其支持跨域訪問。

那現(xiàn)在我們在WebAPI項(xiàng)目中通過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項(xiàng)目并運(yùn)行，接著在頁面http://localhost:31521/Index.aspx中點(diǎn)擊按鈕“跨域獲取數(shù)據(jù)”，通過firebug的控制臺，我們可以看到數(shù)據(jù)跨域加載成功了，如下：

更多精彩內(nèi)容，請點(diǎn)擊《ajax跨域技術(shù)匯總》，進(jìn)行深入學(xué)習(xí)和研究。

至此，關(guān)于ASP.Net Web Api支持跨域請求的示例和演示就完成了，謝謝大家的閱讀。

您可能感興趣的文章:

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

標(biāo)簽：吉林麗江汕頭重慶河南本溪婁底宜春

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