国产一区二区三区免费观看,日本在线视频网,香蕉久久高清国产精品免费

獲取示例前端應用程序

您現在需要的是一個使用 API 的前端應用程序。為此，請轉到此 GitHub 存儲庫并使用 Git 克隆它 – 或者，將整個項目下載為 .zip 文件，然后將其解壓縮到一個文件夾中。

是時候運行一切了

現在您已經掌握了所有拼圖碎片，讓我們將它們拼湊在一起。首先，轉到您的終端并確保 API 正在運行：

dotnet run

在新的終端窗口或選項卡上，訪問剛剛克隆或提取的文件夾。運行以下命令：

npm install npm start

第一個命令安裝項目運行所需的依賴項。第二個命令啟動開發服務器并為應用程序提供服務。運行這兩個命令后，您的默認瀏覽器應該會打開一個指向 http://localhost:3000 的新窗口。如果出于某種原因沒有發生這種情況，請手動執行。

無論如何，在你嘗試提供 React 應用程序后，你應該會看到如下錯誤：

訪問瀏覽器的開發者工具并轉到控制臺視圖（如果您使用 Chrome，請在 Windows/Linux 上按 Control+Shift+J，或在 Mac 上按 Command+Option+J）。您將看到如下錯誤消息：

Access to fetch at 'https://localhost:7246/WeatherForecast' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

這正是我們想要得到的錯誤消息。為什么會發生這種情況？好吧，.NET API 在 https://localhost:7246 上提供服務，而 React 應用程序在 http://localhost:3000 上提供服務。協議不同，端口號也不同。因此，出于 CORS 目的，它們被視為不同的來源。

啟用 CORS 并解決問題

事實證明，在 .NET API 中啟用 CORS 非常容易，因為平臺自帶了支持該功能的內置功能。所以，讓我們開始吧。

使用您最喜歡的文本編輯器，轉到 .NET 項目文件夾并打開Program.cs文件。如果您以前沒有使用過 .NET 6，您可能會發現這個文件很奇怪。它包含以前存儲在Startup.cs文件中的內容。好吧，.NET 6 刪除了 Startup 文件并將其內容合并到Program.cs中。

首先，將其添加到文件頂部：

var policyName = "_myAllowSpecificOrigins";

然后，在實例化構建器變量的行之后添加以下內容：

builder.Services.AddCors(options =>

{

    options.AddPolicy(name: policyName,

                      builder =>

                      {

                          builder

                            .WithOrigins("http://localhost:3000") // specifying the allowed origin

                            .WithMethods("GET") // defining the allowed HTTP method

                            .AllowAnyHeader(); // allowing any header to be sent

                      });

});

上述代碼定義了我們的 CORS 策略。它將允許來自源 http://localhost:3000 的請求，使用 HTTP 方法 GET，帶有任何標頭。

最后，我們在app.UseAuthorization之前添加以下行：

app.UseCors(policyName);

為了消除任何疑問，完整文件應如下所示：

var  policyName = "_myAllowSpecificOrigins";

var builder = WebApplication.CreateBuilder(args);



builder.Services.AddCors(options =>

{

    options.AddPolicy(name: policyName,

                      builder =>

                      {

                          builder

                            .WithOrigins("http://localhost:3000")

                            //.AllowAnyOrigin()

                            .WithMethods("GET")

                            .AllowAnyHeader();

                      });

});



// Add services to the container.



builder.Services.AddControllers();

// Learn more about configuring Swagger/OpenAPI at https://aka.ms/aspnetcore/swashbuckle

builder.Services.AddEndpointsApiExplorer();

builder.Services.AddSwaggerGen();



var app = builder.Build();



// Configure the HTTP request pipeline.

if (app.Environment.IsDevelopment())

{

    app.UseSwagger();

    app.UseSwaggerUI();

}



app.UseHttpsRedirection();

app.UseCors(policyName);



app.UseAuthorization();



app.MapControllers();



app.Run();