iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 13
1
Modern Web

我與 ASP.NET Core 的 30天系列 第 13

[Day13] CORS 跨來源資源共用 - 我與 ASP.NET Core 3 的 30天

  • 分享至 

  • xImage
  •  

CORS簡介

同源政策(Same Origin Policy)是瀏覽器的一種機制,用來限制限制其他域名存取自身網站的資源,避免被任意網頁讀取其他網站的敏感資料。
在同源政策的限制下,瀏覽器通常會限制AJAX Request發出到不同源的URL。但是有時候我們開發的API可能需要讓其他網站呼叫,或是內部前後端分離使用的是不同的域名,這時候就會需要CORS。

CORS(Cross-Origin Resource Sharing,中文:跨來源資源共用),用於讓網頁的受限資源能夠被其他域名的頁面存取的一種機制。使用CORS可以讓伺服器來決定自己的Web API 允許特定來源執行跨來源要求(Cross-Origin Requests),並拒絕其他來源要求。

在ASP.NET Core中啟用CORS

在ASP.NET Core中有三種方式可以啟用 CORS:

  • 在 Middleware 中使用 預設政策 或 命名政策。
  • 使用 [EnableCors] 屬性。
  • 使用 端點路由。

在 Middleware 中使用 預設政策

CORS Middleware會處理跨原始來源的要求。
下列程式碼會將 CORS 原則套用至具有指定來源的所有應用程式端點:
下面範例將示範在Middleware中設定CORS的預設政策

Startup.ConfigureServices加入CORS的設定

services.AddCors(options =>
{
    options.AddDefaultPolicy(builder =>
        {
            builder.WithOrigins("http://www.sample.com",
                                "http://www.demo.com");
        });
});

並在Startup.Configure中設定 CORS 的 Middleware

app.UseCors(); //加上後會套用到全域

備註:UseCors的呼叫必須放在之後 UseRouting ,但在之前UseAuthorization。

如此就可以做好最基礎的CORS設定,並套用在整個網站當中。

在 Middleware 中使用 命名政策

除了使用預設的政策之外,還能設定多組政策並為每個政策加入識別的名稱
下面範例將示範在Middleware中設定CORS的命名政策

Startup.ConfigureServices加入CORS的設定

services.AddCors(options =>
{
    options.AddPolicy(name: "CustomPolicy1",
                      builder =>
                      {
                          builder.WithOrigins("http://www.sample.com",
                                              "http://www.demo.com");
                      });
                      
    options.AddPolicy(name: "CustomPolicy2",
                      builder =>
                      {
                          builder.WithOrigins("http://homepage.com");
                      });
});

並在Startup.Configure中設定 CORS 的 Middleware

app.UseCors("CustomPolicy1"); //加上後會套用到全域

其中的名稱可以任意命名,沒在Middleware中設定的政策則不會被套用至全域。

使用 [EnableCors] 屬性

CORS的設定,除了套用在全域之外,還可以針對特定Controller或是Action進行設定。
以下範例就來介紹[EnableCors] 屬性如何使用,Startup中的設定就沿用上一個範例。
備註:必須先加入using Microsoft.AspNetCore.Cors;

[EnableCors("CustomPolicy2")]
[Route("api/[controller]")]
[ApiController]
public class SampleController : ControllerBase
{
    [HttpGet("")]
    public ActionResult GetModels()
    {
        ...
    }

    [DisableCors]
    [HttpGet("{id}")]
    public ActionResult GetModelById(int id)
    {
        ...
    }
}

上方的範例,在Controller中加入[EnableCors("Policy 名稱")],設定便會套用到底下所有的Action中,如果是想針對某個Action也可以只在Action上套用[EnableCors("Policy 名稱")],便會只將指定的CORS設定套在Action上,此外,對於不想要使用CORS的地方,也可以設定[DisableCors]屬性。

端點路由設定CORS

CORS也可以針對特定的路徑做設定
Startup.ConfigureServices中的設置沿用上方範例
並從Startup.Configure()中作出以下設定

...
app.UseCors();
app.UseAuthorization();

app.UseEndpoints(endpoints =>
{
    endpoints.MapGet("/map",
        context => context.Response.WriteAsync("map"))
        .RequireCors("CustomPolicy1");

    endpoints.MapControllers()
             .RequireCors("CustomPolicy2");
});

透過RequireCors()可以針對不同端點路由去做設定。

CORS政策的選項

以下範例為設置CORS政策的選項方式
Startup.ConfigureServices中的CORS設定在加入選項內容:

services.AddCors(options =>
{
    options.AddDefaultPolicy(
        builder =>
        {
            builder.WithOrigins("http://www.sample.com")
                .SetIsOriginAllowedToAllowWildcardSubdomains()
                .AllowAnyHeader()
                .AllowAnyMethod();
        });
});

SetIsOriginAllowedToAllowWildcardSubdomains()為設定子網域成為原始的來源
AllowAnyHeader()為允許所有Request Header
AllowAnyMethod()為允許所有Http Method

CORS政策的選項有以下幾種選擇

  • 設定允許的來源
  • 設定允許的 HTTP Method
  • 設定允許的Request Header
  • 設定公開的Response Header
  • 跨原始來源要求中的認證
  • 設定預檢到期時間

詳細選項可參考CORS 政策選項

CORS的設定其實可以針對非常細節的選項去設定,透過這些設定可以更仔細地對於資源做到更詳細的把控!

參考資料
在 ASP.NET Core 中啟用跨原始來源要求 (CORS)


上一篇
[Day12] 模型繫結與驗證 - 我與 ASP.NET Core 3 的 30天
下一篇
[Day14] Filters - 我與 ASP.NET Core 3 的 30天
系列文
我與 ASP.NET Core 的 30天31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言