<span id="mktg5"></span>

<i id="mktg5"><meter id="mktg5"></meter></i>

        <label id="mktg5"><meter id="mktg5"></meter></label>
        最新文章專題視頻專題問答1問答10問答100問答1000問答2000關鍵字專題1關鍵字專題50關鍵字專題500關鍵字專題1500TAG最新視頻文章推薦1 推薦3 推薦5 推薦7 推薦9 推薦11 推薦13 推薦15 推薦17 推薦19 推薦21 推薦23 推薦25 推薦27 推薦29 推薦31 推薦33 推薦35 推薦37視頻文章20視頻文章30視頻文章40視頻文章50視頻文章60 視頻文章70視頻文章80視頻文章90視頻文章100視頻文章120視頻文章140 視頻2關鍵字專題關鍵字專題tag2tag3文章專題文章專題2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章專題3
        問答文章1 問答文章501 問答文章1001 問答文章1501 問答文章2001 問答文章2501 問答文章3001 問答文章3501 問答文章4001 問答文章4501 問答文章5001 問答文章5501 問答文章6001 問答文章6501 問答文章7001 問答文章7501 問答文章8001 問答文章8501 問答文章9001 問答文章9501
        當前位置: 首頁 - 科技 - 知識百科 - 正文

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

        來源:懂視網 責編:小采 時間:2020-11-27 22:37:49
        文檔

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

        支持Ajax跨域訪問ASP.NET Web Api 2(Cors)的示例教程:隨著深入使用ASP.NET Web Api,我們可能會在項目中考慮將前端的業務分得更細。比如前端項目使用Angularjs的框架來做UI,而數據則由另一個Web Api 的網站項目來支撐。注意,這里是兩個Web網站項目了,前端項目主要負責界面的呈現和一些前端的相應業務邏輯處理
        推薦度:
        導讀支持Ajax跨域訪問ASP.NET Web Api 2(Cors)的示例教程:隨著深入使用ASP.NET Web Api,我們可能會在項目中考慮將前端的業務分得更細。比如前端項目使用Angularjs的框架來做UI,而數據則由另一個Web Api 的網站項目來支撐。注意,這里是兩個Web網站項目了,前端項目主要負責界面的呈現和一些前端的相應業務邏輯處理

        隨著深入使用ASP.NET Web Api,我們可能會在項目中考慮將前端的業務分得更細。比如前端項目使用Angularjs的框架來做UI,而數據則由另一個Web Api 的網站項目來支撐。注意,這里是兩個Web網站項目了,前端項目主要負責界面的呈現和一些前端的相應業務邏輯處理,而Web Api則負責提供數據。

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

        首先打開Visual Studio 2013,創建一個空白的解決方案,命名為:CrossDomainAccessWebAPI。

        再創建一個空的Web Api項目,命名為:CrossDomainAccess.WebAPI

        接著我們右鍵單擊剛才創建的解決方案,創建一個空的Web項目用來模擬我們的網站對WebAPI項目進行跨域調用,如下:

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

        下面我們在模擬網站的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,這個控制器用來返回數據集合,具體代碼如下:

        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()
         {
         //對象集合模擬數據
         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的路由規則,以便通過api/{controller}/{action}的方式進行訪問,同時讓修改序列化方式,讓WebAPI默認輸出json格式的數據,具體操作如下:

        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());
         }
         }
        }
        

        重新生成一下項目,并在瀏覽器中訪問,這時我們可以的到json格式的數據,如下:

        代碼如下:[{"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端的數據輸出就準備好了。為了測試是否可以跨域訪問,我們再轉到CorsDemo.UI網站項目中。首先創建一個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) {
         //以表格的形式在瀏覽器控制臺顯示數據,IE下不支持
         console.table(data);
         }
         });
         });
         });
         </script>
        </head>
        <body>
         <form id="form1" runat="server">
         <div>
         <input type="button" value="跨域獲取數據" id="getData" />
         </div>
         </form>
        </body>
        </html>
        

        完成以上步驟以后,啟動WebAPI項目和Web項目,并在Web項目的Index頁面中點擊跨域獲取數據按鈕,打開瀏覽器控制臺查看請求結果,在控制臺會出現如下結果:

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

        那現在我們在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>
         /// 允許跨域調用
         /// </summary>
         /// <param name="config"></param>
         private static void EnableCrossSiteRequests(HttpConfiguration config)
         {
         //對所有的請求來源沒有任何限制
         var cors = new EnableCorsAttribute(
         origins: "*",
         headers: "*",
         methods: "*"
         );
         config.EnableCors(cors);
         }
         }
        }
        

        現在,我們再重新生成WebAPI項目并運行,接著在頁面http://localhost:31521/Index.aspx中點擊按鈕“跨域獲取數據”,通過firebug的控制臺,我們可以看到數據跨域加載成功了,如下:

        更多精彩內容,請點擊《ajax跨域技術匯總》,進行深入學習和研究。

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

        聲明:本網頁內容旨在傳播知識,若有侵權等問題請及時與本網聯系,我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

        文檔

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

        支持Ajax跨域訪問ASP.NET Web Api 2(Cors)的示例教程:隨著深入使用ASP.NET Web Api,我們可能會在項目中考慮將前端的業務分得更細。比如前端項目使用Angularjs的框架來做UI,而數據則由另一個Web Api 的網站項目來支撐。注意,這里是兩個Web網站項目了,前端項目主要負責界面的呈現和一些前端的相應業務邏輯處理
        推薦度:
        標簽: API web we
        • 熱門焦點

        最新推薦

        猜你喜歡

        熱門推薦

        專題
        Top
        主站蜘蛛池模板: 国产精品视频免费一区二区三区| 91精品国产免费| 成人伊人亚洲人综合网站222| 亚洲AV无码久久久久网站蜜桃| 91高清免费国产自产拍2021| 久久久久亚洲AV成人片| 免费人成视频在线观看网站| 亚洲图片一区二区| 久久国产免费观看精品3| 91亚洲国产成人精品下载| 国产91免费视频| 中文日韩亚洲欧美制服| 日本特黄特色aa大片免费| 特黄aa级毛片免费视频播放| 免费又黄又爽的视频| 久久er国产精品免费观看8| 亚洲中文字幕无码一区二区三区| 男人和女人高潮免费网站| 一本久久a久久精品亚洲| 久久黄色免费网站| 亚洲a∨无码男人的天堂| 国产成人无码免费视频97| 一级成人a免费视频| 亚洲91av视频| 免费观看黄网站在线播放| 青草久久精品亚洲综合专区| 久久久久国产成人精品亚洲午夜 | 亚洲熟妇无码爱v在线观看| 国产日本一线在线观看免费| 亚洲av成人无码网站… | 亚洲动漫精品无码av天堂| 伊人久久免费视频| 亚洲日韩国产二区无码| 亚洲色婷婷综合开心网| 99精品视频在线观看免费播放| 亚洲黄页网在线观看| 亚洲精品在线视频| 美女视频黄免费亚洲| 国产黄片不卡免费| 亚洲午夜电影在线观看高清| 亚洲欧洲中文日韩av乱码|