1. 程式人生 > >關於ASP.NET MVC WebApi介面跨域訪問的解決方案

關於ASP.NET MVC WebApi介面跨域訪問的解決方案

1.跨域問題的由來同源策略:處於安全考慮,瀏覽器會限制指令碼中發起的跨站請求,瀏覽器要求JavaScript或Cookie只能訪問同域下的內容正是由於這個原因,我們不同的專案之間的呼叫就會被瀏覽器阻止。比如我們常見的場景:WebApi作為資料服務層,它是一個單獨的專案,我們的MVC專案作為Web的顯示層,這個時候我們的MVC裡面就需要呼叫WebbAPi裡面的介面取資料展現在頁面上。因為我們的WebApi和MVC是兩個不同的專案,所以執行起來之後就存在上面說的跨域問題。2.跨域問題的解決原理CORS全稱Cross-Origin Resource Sharing,中文全稱跨域資源共享。它解決跨域問題的原理是通過http的請求報文和響應報文裡面加入相應的標識告訴瀏覽器它能訪問哪些域名的請求。比如我們向響應報文裡面增加這個Access-Control-Allow-Origin:http://localhost:8081,就表示支援http://localhost:8081裡面的所有請求訪問系統資源。其他更多的應用我們就不一一列舉。3.跨域問題的解決細節使用微軟提供的類,在Nuget搜尋“microsoft.aspnet.webapi.cors”,安裝第一個在App_Start資料夾下面的WebApiConfig.cs資料夾配置跨域public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            //跨域配置
            config.EnableCors(new EnableCorsAttribute("*", "*", "*"));            // Web API 路由
            config.MapHttpAttributeRoutes();            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{action}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }4.這個在程式碼裡面寫死的配置不利於安全,最好使用配置進行處理
總結:以上支援webapi 2 的專案;框架是net framework4.0以上的專案;對於框架.net framework4.0以下的版本可以使用下面的方式進行處理。1.一般的解決方案裡面有一個Filters資料夾,需要在這個資料夾裡面新增一個類檔案


    public class CrossSiteAttribute: System.Web.Http.Filters.ActionFilterAttribute
    {
        private const string Origin = "Origin";
         /// <summary>
         /// Access-Control-Allow-Origin是HTML5中定義的一種伺服器端返回Response header,用來解決資源(比如字型)的跨域許可權問題。
         /// </summary>
         private const string AccessControlAllowOrigin = "Access-Control-Allow-Origin";
        /// <summary>
        ///  originHeaderdefault的值可以使 URL 或 *,如果是 URL 則只會允許來自該 URL 的請求,* 則允許任何域的請求
        /// </summary>
        private  string originHeaderdefault = "*";//"http://192.168.13.7:8002";
         /// <summary>
         /// 該方法允許api支援跨域呼叫
         /// </summary>
         /// <param name="actionExecutedContext"> 初始化 System.Web.Http.Filters.HttpActionExecutedContext 類的新例項。</param>
         public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
         {
             actionExecutedContext.Response.Headers.Add(AccessControlAllowOrigin, originHeaderdefault);
         }
}

2.在WebApi介面內需要引用該檔案

 [CrossSite]   --是建立的類
    public class WebApiController : ApiController
    {

}

3.當前介面內就可以跨域訪問了