Web API中使用CORS解決跨域

 Web API中使用Cros解決跨域

　　若是兩個頁面的協議，端口和域名都相同，則兩個頁面具備相同的源，注：IE不考慮端口,同源策略不會阻止瀏覽器發送請求，可是它會阻止應用程序看到響應。以下圖所示

　　CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）它容許瀏覽器向跨源服務器，發出請求。CORS須要瀏覽器和服務器同時支持，目前，主流的瀏覽器都支持CORS，所以實現CORS通訊的關鍵是服務器。CORS是經過目標服務器返回的Header設置來控制是否可跨域。其中重要的一個參數即 Access-Control-Allow-Origin（訪問控制容許來源），經過這個參數指定能夠接收的請求資源。在.net Web API中實現的方式有如下幾種：

1.使用HttpResponseMessage

咱們在Action中能夠直接給HttpResponseMessage添加一個Access-Control-Allow-Origin header

public HttpResponseMessage GetBook(int id)
{
　　BookDto book = db.Books.Include(b=>b.Author).Where(b=>b.BookId==id).Select(AsBookDto).SingleOrDefault();
　　if (book == null)
　　{
　　return Request.CreateErrorResponse(HttpStatusCode.NotFound, "未找到實例");
　　}
　　var response = Request.CreateResponse(book);
　　//有Access-Control-Allow-Origin響應頭，瀏覽器纔會把響應給客戶端,*表示容許任何來源的請求
　　response.Headers.Add("Access-Control-Allow-Origin", "*");
　　return response;
}

2.使用配置文件

在webconfig文件中配置如下節點，使用配置文件時要先移除後添加，確保起做用 

<system.webServer>
　　<httpProtocol>
　　<!--跨域設置-->
　　　　<customHeaders>
　　　　<remove name="Access-Control-Allow-Origin" />
　　　　<remove name="Access-Control-Allow-Headers" />
　　　　<remove name="Access-Control-Allow-Methods" />
　　　　<add name="Access-Control-Allow-Origin" value="*" />
　　　　<add name="Access-Control-Allow-Headers" value="Content-Type" />
　　　　<add name="Access-Control-Allow-Methods" value="*" />
　　　　</customHeaders>
　 </httpProtocol>
</system.webServer>

3.使用過濾器

1.添加一個名爲Cores的過濾器

/// <summary>
/// 跨域
/// </summary>
public class Cores:ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
    base.OnActionExecuted(actionExecutedContext);
    actionExecutedContext.Response.Headers.Add("Access-Control-Allow-Origin", "*");
    }
}

2.在App_strat的WebApiConfig.cs註冊過濾器

添加一行代碼： config.Filters.Add(new Cores()); 咱們也能夠不適用全局過濾器，在Controller，Action上添加特性便可。

4.使用AspNet.WebApi.Cors組件

1.安裝，直接在Nuget命令行輸入：

Install-Package Microsoft.AspNet.WebApi.Cors

2.在WebApiConfig.cs註冊

config.EnableCors();

3.在Controller或者Action上添加特性，便可完成跨域

[EnableCors(origins: "http://localhost:52754", headers: "*", methods: "*")]//[EnableCors(origins: "http://www.example.com", headers: "*", methods: "get,post")]
public class BooksController : ApiController（）{}

5.CORS的工做過程

CORS規範引入了幾個支持跨源請求的新HTTP頭。若是瀏覽器支持CORS，它會自動爲跨源請求設置這些標頭。

一個簡單類型跨域，請求時會添加一個Origin,值爲請求的源

若是服務器容許請求的源能夠訪問，就在響應時添加一個Access-Control-Allow-Origin，其值和請求中的Origin相同，不然返回一個正常的響應。瀏覽器在收到響應時根據是否有Access-Control-Allow-Origin判斷是否把響應中的資源交給請求的源。

　　若是是複雜類型的請求（如請求方式是PUT或DELETE或者Content-Type字段的類型是application/json）會在正式通訊以前，增長一次HTTP查詢請求，稱爲"預檢"請求（preflight）。瀏覽器先詢問服務器，當前網頁所在的域名是否在服務器的許可名單之中，以及服務器容許使用哪些HTTP Method和Header字段。只有獲得確定答覆，瀏覽器纔會發出正式的XMLHttpRequest請求，不然就報錯，整個過程都是瀏覽器自動執行的，這裏再也不詳細介紹。

參考文獻：

1.https://blog.csdn.net/github_37999472/article/details/64918942

2.http://www.javashuo.com/article/p-ajvnwvwz-dz.html