主頁(yè) > 知識(shí)庫(kù) > 支持Ajax跨域訪問(wèn)ASP.NET Web Api 2(Cors)的示例教程

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

熱門標(biāo)簽:地圖標(biāo)注的公司有哪些 地圖標(biāo)注專業(yè)團(tuán)隊(duì) 塔城代理外呼系統(tǒng) 代理接電話機(jī)器人如何取消 遂寧市地圖標(biāo)注app 地圖定位圖標(biāo)標(biāo)注 濮陽(yáng)外呼電銷系統(tǒng)怎么樣 400電話辦理哪家性價(jià)比高 天心智能電銷機(jī)器人

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

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

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

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

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

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

下面我們?cè)谀M網(wǎng)站的Web項(xiàng)目中通過(guò)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è)控制器用來(lái)返回?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()
  {
   //對(duì)象集合模擬數(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ī)則,以便通過(guò)api/{controller}/{action}的方式進(jìn)行訪問(wè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)目,并在瀏覽器中訪問(wèn),這時(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)備好了。為了測(cè)試是否可以跨域訪問(wèn),我們?cè)俎D(zhuǎn)到CorsDemo.UI網(wǎng)站項(xiàng)目中。首先創(chuàng)建一個(gè)index.aspx頁(yè)面(這個(gè)命名自己可以任意?。┖蟠蜷_(kāi),修改成如下的代碼:

%@ 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) {
      //以表格的形式在瀏覽器控制臺(tái)顯示數(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>

完成以上步驟以后,啟動(dòng)WebAPI項(xiàng)目和Web項(xiàng)目,并在Web項(xiàng)目的Index頁(yè)面中點(diǎn)擊跨域獲取數(shù)據(jù)按鈕,打開(kāi)瀏覽器控制臺(tái)查看請(qǐng)求結(jié)果,在控制臺(tái)會(huì)出現(xiàn)如下結(jié)果:

控制臺(tái)提示我們跨域請(qǐng)求被阻止,同時(shí)提示CORS頭部信息確實(shí),所以我們可以通過(guò)去WebAPI配置CORS來(lái)讓其支持跨域訪問(wèn)。

那現(xiàn)在我們?cè)赪ebAPI項(xiàng)目中通過(guò)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)
  {
   //對(duì)所有的請(qǐng)求來(lái)源沒(méi)有任何限制
   var cors = new EnableCorsAttribute(
    origins: "*",
    headers: "*",
    methods: "*"
    );
   config.EnableCors(cors);
  }
 }
}

現(xiàn)在,我們?cè)僦匦律蒞ebAPI項(xiàng)目并運(yùn)行,接著在頁(yè)面http://localhost:31521/Index.aspx中點(diǎn)擊按鈕“跨域獲取數(shù)據(jù)”,通過(guò)firebug的控制臺(tái),我們可以看到數(shù)據(jù)跨域加載成功了,如下:

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

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

您可能感興趣的文章:
  • 創(chuàng)建一個(gè)完整的ASP.NET Web API項(xiàng)目
  • ASP.NET中Web API的簡(jiǎn)單實(shí)例
  • ASP.NET MVC Web API HttpClient簡(jiǎn)介
  • ASP.NET Web Api 2實(shí)現(xiàn)多文件打包并下載文件的實(shí)例
  • ASP.NET Web API教程 創(chuàng)建Admin視圖詳細(xì)介紹
  • ASP.NET Web API如何將注釋自動(dòng)生成幫助文檔
  • 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跨域訪問(wèn)ASP.NET Web Api 2(Cors)的示例教程》,本文關(guān)鍵詞  支持,Ajax,跨域,訪問(wèn),ASP.NET,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《支持Ajax跨域訪問(wèn)ASP.NET Web Api 2(Cors)的示例教程》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于支持Ajax跨域訪問(wèn)ASP.NET Web Api 2(Cors)的示例教程的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章