標籤：url complete copy start parameter 成功 操作 status 問題：
閱讀目錄
本文
前言：上篇總結了下WebApi的介面測試載入器的使用，這篇接著來看看WebAPI的另一個常見問題：跨域問題。本篇主要從執行個體的角度分享下CORS解決跨域問題一些細節。
一、跨域問題的由來
同源策略：出於安全考慮，瀏覽器會限制指令碼中發起的跨站請求，瀏覽器要求JavaScript或Cookie只能訪問同域下的內容。
正是由於這個原因，我們不同項目之間的調用就會被瀏覽器阻止。比如我們最常見的情境：WebApi作為資料服務層，它是一個單獨的項目，我們的MVC項目作為Web的顯示層，這個時候我們的MVC裡面就需要調用WebApi裡面的介面取資料展現在頁面上。因為我們的WebApi和MVC是兩個不同的項目，所以運行起來之後就存在上面說的跨域的問題。
回到頂部二、跨域問題解決原理CORS全稱Cross-Origin Resource Sharing，中文全稱跨域資源共用。它解決跨域問題的原理是通過向http的請求報文和響應報文裡面加入相應的標識告訴瀏覽器它能訪問哪些網域名稱的請求。比如我們向響應報文裡面增加這個Access-Control-Allow-Origin:http://localhost:8081，就表示支援http://localhost:8081裡面的所有請求訪問系統資源。其他更多的應用我們就不一一列舉，可以去網上找找。
回到頂部三、跨域問題解決細節下面我就結合一個簡單的執行個體來說明下如何使用CORS解決WebApi的跨域問題。
回到頂部1、情境描述我們建立兩個項目，一個WebApi項目（中WebApiCORS），一個MVC項目（中Web）。WebApi項目負責提供介面服務，MVC項目負責頁面呈現。如下：
其中，Web與WebApiCORS連接埠號碼分別為“27239”和“27221”。Web項目需要從WebApiCORSS項目裡面取資料，很顯然，兩個項目連接埠不同，所以並不同源，如果使用常規的調用方法肯定存在一個跨域的問題。
簡單介紹下測試代碼，Web裡面有一個HomeController
public class HomeController : Controller { // GET: Home public ActionResult Index() { return View(); } }
對應的Index.cshtml
<html><head> <meta name="viewport" content="width=device-width" /> <title>Index</title> <script src="~/Content/jquery-1.9.1.js"></script> <link href="~/Content/bootstrap/css/bootstrap.css" rel="stylesheet" /> <script src="~/Content/bootstrap/js/bootstrap.js"></script> <script src="~/Scripts/Home/Index.js"></script></head><body> 測試結果：<div id="div_test"> </div></body></html>
Index.js檔案
var ApiUrl = "http://localhost:27221/";$(function () { $.ajax({ type: "get", url: ApiUrl + "api/Charging/GetAllChargingData", data: {}, success: function (data, status) { if (status == "success") { $("#div_test").html(data); } }, error: function (e) { $("#div_test").html("Error"); }, complete: function () { } });});
WebApiCORS項目裡面有一個測試的WebApi服務ChargingController
public class ChargingController : ApiController { /// <summary> /// 得到所有資料 /// </summary> /// <returns>返回資料</returns> [HttpGet] public string GetAllChargingData() { return "Success"; } }
配置WebApi的路由規則為通過action調用。WebApiConfig.cs檔案
public static class WebApiConfig { public static void Register(HttpConfiguration config) { // Web API 路由 config.MapHttpAttributeRoutes(); config.Routes.MapHttpRoute( name: "DefaultApi", routeTemplate: "api/{controller}/{action}/{id}", defaults: new { id = RouteParameter.Optional } ); } }回到頂部2、情境測試1）我們不做任何的處理，直接將兩個項目運行起來。看效果如何
IE瀏覽器：
Google瀏覽器：
這個結果另博主也很吃驚，不做任何跨域處理，IE10、IE11竟然可以直接請求資料成功，而同樣的代碼IE8、IE9、Google瀏覽器卻不能跨域訪問。此原因有待尋找，應該是微軟動了什麼手腳。
2）使用CORS跨域首先介紹下CORS如何使用，在WebApiCORS項目上面使用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 } ); } }
我們暫訂三個“*”號，當然，在項目中使用的時候一般需要指定對哪個網域名稱可以跨域、跨域的操作有哪些等等。這個在下面介紹。
IE10、IE11
Google瀏覽器
IE8、IE9
這個時候又有新問題了，怎麼回事呢？我都已經設定跨域了呀，怎麼IE8、9還是不行呢？這個時候就有必要說說CORS的瀏覽器支援問題了。網上到處都能搜到這張圖：
描述了CORS的瀏覽器支援情況，可以看到IE8、9是部分支援的。網上說的解決方案都是Internet Explorer 8 、9使用 XDomainRequest 對象實現CORS。是不是有這麼複雜？於是博主各種百度尋找解決方案。最後發現在調用處指定 jQuery.support.cors = true; 這一句就能解決IE8、9的問題了。具體是在Index.js裡面
jQuery.support.cors = true;var ApiUrl = "http://localhost:27221/";$(function () { $.ajax({ type: "get", url: ApiUrl + "api/Charging/GetAllChargingData", data: {}, success: function (data, status) { if (status == "success") { $("#div_test").html(data); } }, error: function (e) { $("#div_test").html("Error"); }, complete: function () { } });});
這句話的意思就是指定瀏覽器支援跨域。原來IE9以上版本的瀏覽器、Google、Firefox等都預設支援跨域，而IE8、9卻預設不支援跨域，需要我們指定一下。你可以在你的瀏覽器裡面列印jQuery.support.cors看看。這樣設定之後是否能解決問題呢？我們來看效果：
問題完美解決。至於網上說的CORS對IE8、9的解決方案XDomainRequest是怎麼回事，有待執行個體驗證。
3）CORS的具體參數設定。上文我們使用
config.EnableCors(new EnableCorsAttribute("*", "*", "*"));
這一句解決了跨域問題，上面說了，這種*號是不安全的。因為它表示只要別人知道了你的請求url，任何請求都可以訪問到你的資源。這是相當危險的。所以需要我們做一些配置，限制存取權限。比如我們比較常見的做法如下：
配置方法一、在Web.Config裡面（PS：這兩張圖源自：http://www.cnblogs.com/moretry/p/4154479.html）
然後在WebApiConfig.cs檔案的Register方法裡面
配置方法二、如果你只想對某一些api做跨域，可以直接在API的類上面使用特性標註即可。
[EnableCors(origins: "http://localhost:8081/", headers: "*", methods: "GET,POST,PUT,DELETE")] public class ChargingController : ApiController { /// <summary> /// 得到所有資料 /// </summary> /// <returns>返回資料</returns> [HttpGet] public string GetAllChargingData() { return "Success"; } }回到頂部四、總結
以上就是一個簡單的CORS解決WebApi跨域問題的執行個體，由於博主使用WebApi的時間並不長，所以很多理論觀點未必成熟，如果有說的不對的，歡迎指出。博主在此多謝啦。
C#進階系列——WebApi 跨域問題解決方案：CORS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
