之前的文章，我們了解了 WebAPI 的 Basic 基礎(chǔ)認(rèn)證，在這一章，我們就來了解一下，如何解決 WebAPI 的跨域問題。

在解決問題之前，我們需要先了解問題，什么是跨域

跨域從本質(zhì)上來講，其實(shí)并不是我們寫的程序的問題，而是瀏覽器的行為，舉個(gè)例子，我們寫了一個(gè) WebAPI 項(xiàng)目之后，別的程序想要調(diào)用我們的方法的時(shí)候，因?yàn)橛蛎煌?，此時(shí)就會(huì)出現(xiàn)跨域問題。下面上圖，我把之前的項(xiàng)目復(fù)制到一個(gè)測試的解決方案中，然后把他的端口號進(jìn)行修改，

測試解決方案的端口號

被調(diào)用的程序的端口號

程序我一點(diǎn)都沒有改，還是 Basic 的那個(gè)程序，所以在登陸功能中調(diào)用的端口號還是沒有變的，接下來我們就在10086端口號的程序中打一下斷點(diǎn)并啟動(dòng)調(diào)試，然后打開10010的項(xiàng)目網(wǎng)站來試一下，看看能不能訪問成功。

10086程序中打了斷點(diǎn)的代碼

我們可以看到。在10010的程序中調(diào)用10086的方法是可以成功的，請求已經(jīng)進(jìn)來了

瀏覽器中的報(bào)錯(cuò)

但是我們發(fā)現(xiàn)，無論怎么點(diǎn)擊登陸都沒辦法成功登陸，打開調(diào)試工具，我們發(fā)現(xiàn)，請求是已經(jīng)成功了的，但是下面有一個(gè)報(bào)錯(cuò)：

XMLHttpRequest cannot load http://localhost:10086/api/MyWebAPITest/Login?Name=957&Password=lsy. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:10010' is therefore not allowed access.

這句話的大致意思是：這個(gè) Http 請求缺少 Access-Control-Allow-Origin 頭信息，所以不能在域名為10010的程序中訪問。

這足以說明，跨域問題的出現(xiàn)并不是我們程序中的問題，而是瀏覽器的行為。

那么這種問題我們應(yīng)該怎么解決呢，其實(shí)很簡單，只需要在被調(diào)用的項(xiàng)目的 WebAPI路由中進(jìn)行一下設(shè)置就可以了。

首先我們在10086的程序中打開 NuGet 包管理，并添加 Microsoft.AspNet.WebApi.Cors?包

Microsoft.AspNet.WebApi.Cors

然后添加命名空間 System.Web.Http.Cors 并添加以下代碼到 WebAPiI 的路由配置文件中

配置跨域信息

在這個(gè)跨域信息的配置方法中是可以通過參數(shù)設(shè)置端口號和地址的，我們就用 * 來表示不進(jìn)行限制。最后我們來看一下配置之后的結(jié)果。

配置了跨域信息之后，可以成功的登陸了

以上就是 WebAPI 的跨域配置方法。另外還要說一句，解決跨域的問題更多時(shí)候是為了緩解服務(wù)器的壓力，在頁面上現(xiàn)實(shí)的內(nèi)容并不來自于一臺(tái)服務(wù)器。