.Net Core Cors中間件的深入講解

更新時間：2018年07月13日 15:31:27 作者：MicroHeart！

這篇文章主要給大家介紹了關(guān)于.Net Core Cors中間件的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

同源策略和資源跨域共享

1、同源策略

同源策略，它是由Netscape提出的一個著名的安全策略。現(xiàn)在所有支持JavaScript 的瀏覽器都會使用這個策略。所謂同源是指，域名，協(xié)議，端口相同。

1.1、目的

主要是為了保證用戶信息的安全，防止網(wǎng)站竊取用戶數(shù)據(jù)。假如沒有同源策略，可能就會有下面這種情況的發(fā)生。用戶訪問兩個網(wǎng)站A/B，并登錄了A網(wǎng)站，A網(wǎng)站會在計算機本地存儲Cookie或者Token等等，在訪問B網(wǎng)站的時候，B網(wǎng)站就可以訪問這些本地的存儲信息，B網(wǎng)站可以使用用戶的Cookie去登錄A網(wǎng)站，那這樣用戶信息就被泄露了。

1.2、限制范圍　　　

Cookie、LocalStorage和indexDB無法訪問(只有同源的網(wǎng)頁才能共享Cookie)
DOM無法獲得（父窗口和子窗口的地址是同源的才能獲取子窗口的信息）
AJAX請求不能被發(fā)送(AJAX請求只能發(fā)送給同源的網(wǎng)址)

要知道一點，這些限制其實都是瀏覽器做的限制。

2、跨域資源共享

跨域資源共享跟同源策略相反。在整個跨域通信過程中，瀏覽器會自動識別此次請求是否跨域，一旦發(fā)現(xiàn)跨域，就自動添加請求頭信息(如Origin)或者自動發(fā)送一次請求方式為option的預(yù)請求。瀏覽器將CORS請求分為兩類：簡單請求和非簡單請求。

2.1、簡單請求

當瀏覽器的請求方式是Head、Get或者Post，并且HTTP的頭信息中不會超出以下字段:

Accept
Accept-Language
Content-Language
Origin

時，瀏覽器會將該請求定義為簡單請求，否則就是非簡單請求。當瀏覽器判斷為簡單請求后，瀏覽器會自動再請求報文頭中加上Origin字段，表明此次請求來自的地址(協(xié)議+域名+端口)。然后服務(wù)器需要去判斷是否接受這個來源的請求。如果允許服務(wù)器端返回的頭部中需要有Access-Control-Allow-Origin，其值為請求時Origin字段的值或*（表示接受任意源的請求）。請求頭中還會有Access-Control-Allow-Methods表示服務(wù)器允許的跨域請求的方式。Access-Control-Allow-Headers表示請求頭中允許出現(xiàn)的字段。

2.2、非簡單請求

當瀏覽器判斷為非簡單請求后，會發(fā)送兩次請求，首先瀏覽器會自動發(fā)送一個請求方式為options的請求，并在請求頭中

加上Access-Control-Request-Method表示下次請求的方法，
加上Origin表明來源，
加上Access-Control-Request-Headers表示下次請求的請求頭中額外的字段。

服務(wù)器收到請求后，需要獲取這三個請求頭中的值，并進行判斷，確認是否允許進行跨域。如果服務(wù)器返回的請求頭中沒有任何CORS相關(guān)的請求頭信息，瀏覽器會認為不通過預(yù)檢，也不會進行第二次請求。

服務(wù)器如果接受跨域并驗證通過了options的請求，會返回Access-Control-Allow-Origin(表明允許跨域請求的源)、Access-Control-Allow-Methods(允許跨域請求的請求方式)、Access-Control-Allow-Headers(允許請求頭中包含的額外字段)。然后瀏覽器才會發(fā)送真正的請求。　

(第一次options請求)

(第二次請求)

二、服務(wù)端實現(xiàn)CORS

在.Net Core Web Api中使用很簡單，首先安裝包Microsoft.AspNet.WebApi.Cors，在StartUp中添加下面兩句

public void ConfigureServices(IServiceCollection services)
 {
  services.AddMvc();
　　　　　　　//添加Cors，并配置CorsPolicy 
  services.AddCors(options => options.AddPolicy("CorsTest", p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()));
 }

 public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
 {
  if (env.IsDevelopment())
  {
  app.UseDeveloperExceptionPage();
  }　　　　　　 //注意UseCors()要在UseMvc()之前
  app.UseCors("CorsTest");
  app.UseMvc();
 }

在使用的時候只需要在Controller或者Action中加上特性[EnableCors("CorsTest")]

[EnableCors("CorsTest")]
 public class ValuesController : Controller
 {
 private ILogger<ValuesController> _logger;
 public ValuesController(ILogger<ValuesController> logger)
 {
  _logger = logger;
 }
 [HttpGet]
 public IEnumerable<string> Get()
 {
  return new string[] { "value1", "value2" };
 }
 }

現(xiàn)在服務(wù)端已經(jīng)配置好了，現(xiàn)在需要通過前端跨域請求

<html>
<head>
 測試
</head>
<body>
 測試
</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
 $(function () {
 $.ajax({
  type: "get",
  url: "http://localhost:7000/api/values",
  beforeSend: function (request) {//在請求報文頭中加入Authorization 目的是讓請求為非簡單請求
  request.setRequestHeader("Authorization", "Bearer 071899A00D4D4C5B1C41A6B0211B9399");
  },
  success: function (result) {
  alert(result);
  }
 }, "json");
 });
</script>

測試結(jié)果如下圖：

　　　　　　　　　　　　　　　　　　　　　　　　　　(options請求)

　　　　　　　　　　　　　　　　　　　　　　　?。ǖ诙握埱螅?/p>

上面配置允許所有的地址請求這個接口，也可以單獨配置某個地址。

services.AddCors(options => options.AddPolicy("CorsTest", p => p.WithOrigins("http://localhost:8089")
                   .AllowAnyHeader()
                   .AllowAnyMethod()));

三、解析Cors源碼

打開CORS源碼，主要的是CorsMiddleware、CorsOptions、CorsPolicy、CorsPolicyBuilder、CorsResult、CorsService這幾個類。

CorsPolicy：就是我們在Startup中的配置，如允許哪些域名可以跨域請求，允許哪些跨域請求方式，允許哪些額外的請求頭，每個配置對應(yīng)一個名稱。
services.AddCors(options => options.AddPolicy("CorsTest", p => p.AllowAnyOrigin().AllowAnyHeader().AllowAnyMethod()));
CorsOptions：中包含一個字典IDictionary<string, CorsPolicy> PolicyMap，一個項目可能有過個Cors配置，所以這個CorsOptions就是通過配置名稱管理這些配置的。
CorsPolicyBuilder：通過它來構(gòu)造CorsPolicy。
CorsResult：是驗證跨域過程得到的結(jié)果。如在第一次Options請求時，客戶端發(fā)送了Origi：http://localhost:8089，服務(wù)器會返回Access-Control-Allow-Origin：http://localhost:8089，服務(wù)器驗證http://localhost:8089這個域名是否允許跨域，如果允許就將“http://localhost:8089”這個值存儲到CorsResult的AllowedHeaders中，在請求(第一次請求)返回的時候?qū)⑦@些加到HTTP請求頭中。
CorsMiddleware：Cors中間件類，主要方法就是Invoke，每次HTTP請求都會調(diào)用這個方法。

public async Task Invoke(HttpContext context)
  {//判斷HTTP請求頭是否有Origin，由此判斷是不是跨域請求
   if (context.Request.Headers.ContainsKey(CorsConstants.Origin))
   {
    var corsPolicy = _policy ?? await _corsPolicyProvider?.GetPolicyAsync(context, _corsPolicyName);
    if (corsPolicy != null)
    {
     var accessControlRequestMethod = context.Request.Headers[CorsConstants.AccessControlRequestMethod];　　　　　　　　　　　　//如果是跨域請求 判斷是不是第一次Options請求
     if (string.Equals(context.Request.Method,CorsConstants.PreflightHttpMethod,StringComparison.OrdinalIgnoreCase) 
      &&!StringValues.IsNullOrEmpty(accessControlRequestMethod))
     { 　　　　　　　　　　　　　　//判斷是否允許當前請求跨域，根據(jù)HttpContext的內(nèi)容和Cors配置 得到CorsResult,然后將CorsResult的內(nèi)容添加到請求頭中(看下面詳細解釋)
      ApplyCorsHeaders(context, corsPolicy);
      context.Response.StatusCode = StatusCodes.Status204NoContent;
      return;
     }
     else
     {// 執(zhí)行第二次非Options請求
      context.Response.OnStarting(state =>
      {
       var (httpContext, policy) = (Tuple<HttpContext, CorsPolicy>)state;
       try
       {
        ApplyCorsHeaders(httpContext, policy);
       }
       catch (Exception exception)
       {
        _logger.FailedToSetCorsHeaders(exception);
       }
       return Task.CompletedTask;
      }, Tuple.Create(context, corsPolicy));
     }
    }
   }
   await _next(context);
  }
　　　　
  private void ApplyCorsHeaders(HttpContext context, CorsPolicy corsPolicy)
  {　　//通過HTTP上下文請求的數(shù)據(jù)和Cors配置 得到CorsResult　　　　　　　　如在第一次Options請求時，客戶端發(fā)送了Origi：http://localhost:8089，Access-Control-Resquest-Methods:GET　　　　　　　　服務(wù)器會返回Access-Control-Allow-Origin：http://localhost:8089，Access-Control-Allow-Methods:GET　　　　　　　　服務(wù)器驗證http://localhost:8089這個域名以GET請求方式是否允許跨域，　　　　　　　　如果允許就將“http://localhost:8089”這個值存儲到CorsResult的AllowedHeaders中　　　　　　　　將"GET"存儲到CorsResult的AllowedMethods中
   var corsResult = _corsService.EvaluatePolicy(context, corsPolicy);　　　　　　　　//將CorsResult中的值添加到相應(yīng)頭中的，返回到客戶端
   _corsService.ApplyResult(corsResult, context.Response);
  }

相對來說Cors源碼還是比較簡單的，很容易看懂?？梢宰约簩懸粋€項目，然后掛上源碼單步調(diào)試。

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。

您可能感興趣的文章: