Code Brew Tea

雖然同為本機 localhost ，但由於 React 前端網頁 Port:3000 與 .Net Core 後端 API Port:44366不同，因此發生了CORS 的問題，可透過以下步驟解決此問題。

1. 在 React 前端網頁出現了以下的錯誤訊息

2. 於 .Net Core 專案 Startup.cs 中補上以下兩段程式碼，即可解決此問題

2.1. 於 ConfigureServices 方法中補上 AddCors 方法，如下:

services.AddCors(options =>
{
	// CorsPolicy 是自訂的 Policy 名稱
	options.AddPolicy("CorsPolicy", policy =>
	{
		policy.AllowAnyOrigin()
				  .AllowAnyHeader()
				  .AllowAnyMethod();
		//.AllowCredentials();
	});
});

完整程式碼如下:

public void ConfigureServices(IServiceCollection services)
{
	services.AddControllers();

	services.AddCors(options =>
	{
		// CorsPolicy 是自訂的 Policy 名稱
		options.AddPolicy("CorsPolicy", policy =>
		{
			policy.AllowAnyOrigin()
				  .AllowAnyHeader()
				  .AllowAnyMethod();
			//.AllowCredentials();
		});
	});
}

2.2. 於 Configure 方法中補上 UseCors 方法，如下:

app.UseCors("CorsPolicy");

完整程式碼如下:

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
	if (env.IsDevelopment())
	{
		app.UseDeveloperExceptionPage();
	}

	app.UseHttpsRedirection();

	app.UseRouting();

	app.UseAuthorization();

	app.UseCors("CorsPolicy");

	app.UseEndpoints(endpoints =>
	{
		endpoints.MapControllers();
	});
}

按照以上兩段程式碼即可排除 CORS 問題。

參考資料:
Mozilla CORS 說明