1. 程式人生 > 實用技巧 >.Net Core 3.1 跨域

.Net Core 3.1 跨域

在.Net Core 3.1中解決跨域的方式有很多,基本原理就是將CORS中介軟體新增到web應用程式管道中以允許跨域。常見的寫法有以下兩種方式:

一、利用AddPolicy和UseCors實現跨域

該種方式分為來三步走,先注入服務,然後宣告跨域策略,最後啟用跨域策略

1、注入服務和宣告跨域策略

開啟伺服器端專案的“Startup.cs”檔案,找到ConfigureServices(IServiceCollection services)方法,新增如下程式碼:

 services.AddCors(options => {
     options.AddPolicy("cors", builder => { builder.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader(); });
 });

注意:

  • “cors”表示策略名稱,可以隨便起;可以新增多條策略。
  • AllowAnyOrigin表示允許任何域;AllowAnyMethod表示允許任何方法;AllowAnyHeader表示允許任何訊息頭。
  • 如果是允許指定的域、方法、訊息頭需要使用WithOrigins、WithMethods、WithHeaders方法。

2、啟用跨域策略

在Configure(IApplicationBuilder app, IWebHostEnvironment env)方法中新增以下程式碼:

app.UseCors("cors");

括號中的"cores"表示要啟用的策略名稱(前面定義過的)。

二、利用UseMiddleware實現跨域

該種方式分為來兩步走,先定義跨域中介軟體,最後啟用跨域中介軟體

1、自定義跨域中介軟體

新建一個cs檔案,寫入以下程式碼:

   /// <summary>
    /// 跨域中介軟體
    /// </summary>
    public class CorsMiddleware
    {
        private readonly RequestDelegate _next;

        /// <summary>
        /// 管道執行到該中介軟體時候下一個中介軟體的RequestDelegate請求委託,如果有其它引數,也同樣通過注入的方式獲得
        
/// </summary> /// <param name="next">下一個處理者</param> public CorsMiddleware(RequestDelegate next) { _next = next; } /// <summary> /// 自定義中介軟體要執行的邏輯 /// </summary> /// <param name="context"></param> /// <returns></returns> public async Task Invoke(HttpContext context) { context.Response.Headers.Add("Access-Control-Allow-Origin", "*"); context.Response.Headers.Add("Access-Control-Allow-Headers", "*"); context.Response.Headers.Add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS"); //若為OPTIONS跨域請求則直接返回,不進入後續管道 if (context.Request.Method.ToUpper() != "OPTIONS") await _next(context);//把context傳進去執行下一個中介軟體 } }

2、啟用跨域中介軟體

在Configure(IApplicationBuilder app, IWebHostEnvironment env)方法中新增以下程式碼:

app.UseMiddleware<CorsMiddleware>();

其中CorsMiddleware是第一步中定義的中介軟體名稱,即類名