本篇將介紹
ASP.NET
Core 啟用跨域請求 Cross-Origin Requests (CORS)。
同步發佈至個人部落格：
John Wu’s Blog – [鐵人賽 Day26] ASP.NET
Core 2 系列 – 跨域請求 (Cross-Origin Requests)
假設有兩個 Domain：
blog.johnwu.cc
用於提供使用者瀏覽，存放 HTML、JS、CSS 等檔案。
api.johnwu.cc
提供 Web API 給 JavaScript 調用。
當瀏覽器開啟 http://blog.johnwu.cc
頁面後，接著透過 AJAX 呼叫了 http://api.johnwu.cc/cors-sample
，此時就形成的 A Domain 呼叫了 B Domain 的跨域請求 Cross-Origin Requests (CORS)，瀏覽器基於安全性考量，並不允許這種情況發生。情境圖如下：
Failed to load http://api.johnwu.cc/cors-sample
: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://blog.johnwu.cc
‘ is therefore not allowed access.
在
ASP.NET
Core 中使用 CORS，需要 Microsoft.AspNetCore.Cors 套件。
ASP.NET
Core 2.0 以上版本，預設是參考 Microsoft.AspNetCore.All，已經包含 Microsoft.AspNetCore.Cors，所以不用再安裝。
如果是 ASP.NET
Core 1.0 的版本，可以透過 .NET Core CLI 在專案資料夾執行安裝指令：
dotnet add package Microsoft.AspNetCore.Cors
ASP.NET
Core 中使用 CORS 只要在 Startup.ConfigureServices 呼叫 AddCors，就能註冊 CORS 的 Policy 規則，如下：
Startup.cs
// …
public class Startup
{
public void ConfigureServices(IServiceCollection services)
{
services.AddCors(options =>
{
// CorsPolicy 是自訂的 Policy 名稱
options.AddPolicy(“CorsPolicy”, policy =>
{
policy.WithOrigins(“http://localhost:3000”)
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});
// …
}
// …
}
WithOrigins
設定允許跨域的來源，有多個的話可以用 , 隔開。
若要同意所有跨域來源都能呼叫的話，可以把 WithOrigins() 改為 AllowAnyOrigin()。
AllowAnyHeader
允許任何的 Request Header。若要限制 Header，可以改用 WithHeaders，有多個的話可以用 , 隔開。
AllowAnyMethod
允許任何的 HTTP Method。若要限制 Method，可以改用 WithMethods，有多個的話可以用 , 隔開。
AllowCredentials
預設瀏覽器不會發送 CORS 的憑證(如：Cookies)，如果 JavaScript 使用 withCredentials = true 把 CORS 的憑證帶入，ASP.NET
Core 這邊也要允取，才可以正常使用。
套用 Policy
套用 Policy 有兩種方式：
全域套用
區域套用
全域套用
在 Startup.Configure 呼叫 UseCors 註冊 Middleware，並指定要套用的 Policy 名稱，就可以套用到所有的 Request。如下：
Startup.cs
public class Startup
{
public void Configure(IApplicationBuilder app)
{
app.UseCors(“CorsPolicy”);
// …
}
}
區域套用
可以在 Controller 或 Action 掛上 [EnableCors(“Policy 名稱”)]，套用 Policy 到 Controller 或 Action 上。
Controller
// …
[EnableCors(“CorsPolicy”)]
public class HomeController : Controller
{
// …
}
Action
// …
public class HomeController : Controller
{
[EnableCors(“CorsPolicy”)]
[Route(“cors-sample”)]
public ResultModel Test()
{
// …
}
}
在 ASP.NET
Core 允取 CROS 後，完整的情境如下：
转载请注明：XAMPP中文组官网 » [Day26] ASP.NET Core 2 系列 – 跨域請求 (Cross-Origin Requests)