国产成人福利视频网站,国产精品夜色一区二区三区,一级特黄特色的免费大片视频

獲取示例前端應(yīng)用程序

您現(xiàn)在需要的是一個(gè)使用 API 的前端應(yīng)用程序。為此，請(qǐng)轉(zhuǎn)到此 GitHub 存儲(chǔ)庫并使用 Git 克隆它 – 或者，將整個(gè)項(xiàng)目下載為 .zip 文件，然后將其解壓縮到一個(gè)文件夾中。

是時(shí)候運(yùn)行一切了

現(xiàn)在您已經(jīng)掌握了所有拼圖碎片，讓我們將它們拼湊在一起。首先，轉(zhuǎn)到您的終端并確保 API 正在運(yùn)行：

dotnet run

在新的終端窗口或選項(xiàng)卡上，訪問剛剛克隆或提取的文件夾。運(yùn)行以下命令：

npm install npm start

第一個(gè)命令安裝項(xiàng)目運(yùn)行所需的依賴項(xiàng)。第二個(gè)命令啟動(dòng)開發(fā)服務(wù)器并為應(yīng)用程序提供服務(wù)。運(yùn)行這兩個(gè)命令后，您的默認(rèn)瀏覽器應(yīng)該會(huì)打開一個(gè)指向 http://localhost:3000 的新窗口。如果出于某種原因沒有發(fā)生這種情況，請(qǐng)手動(dòng)執(zhí)行。

無論如何，在你嘗試提供 React 應(yīng)用程序后，你應(yīng)該會(huì)看到如下錯(cuò)誤：

訪問瀏覽器的開發(fā)者工具并轉(zhuǎn)到控制臺(tái)視圖（如果您使用 Chrome，請(qǐng)?jiān)?Windows/Linux 上按 Control+Shift+J，或在 Mac 上按 Command+Option+J）。您將看到如下錯(cuò)誤消息：

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.

這正是我們想要得到的錯(cuò)誤消息。為什么會(huì)發(fā)生這種情況？好吧，.NET API 在 https://localhost:7246 上提供服務(wù)，而 React 應(yīng)用程序在 http://localhost:3000 上提供服務(wù)。協(xié)議不同，端口號(hào)也不同。因此，出于 CORS 目的，它們被視為不同的來源。

啟用 CORS 并解決問題

事實(shí)證明，在 .NET API 中啟用 CORS 非常容易，因?yàn)槠脚_(tái)自帶了支持該功能的內(nèi)置功能。所以，讓我們開始吧。

使用您最喜歡的文本編輯器，轉(zhuǎn)到 .NET 項(xiàng)目文件夾并打開Program.cs文件。如果您以前沒有使用過 .NET 6，您可能會(huì)發(fā)現(xiàn)這個(gè)文件很奇怪。它包含以前存儲(chǔ)在Startup.cs文件中的內(nèi)容。好吧，.NET 6 刪除了 Startup 文件并將其內(nèi)容合并到Program.cs中。

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

var policyName = "_myAllowSpecificOrigins";

然后，在實(shí)例化構(gòu)建器變量的行之后添加以下內(nèi)容：

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 的請(qǐng)求，使用 HTTP 方法 GET，帶有任何標(biāo)頭。

最后，我們?cè)?strong>app.UseAuthorization之前添加以下行：

app.UseCors(policyName);

為了消除任何疑問，完整文件應(yīng)如下所示：

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();