启动我的应用程序时无法访问 swagger UI

Question

我正在使用 ASP.NET core 6，并使用 React 选项创建了我的应用程序（所以我的文件夹中有一个 ClientApp）。

当我运行该应用程序时，我将看到我的 React UI，而看不到 swagger UI。

通常，当您选择从两个不同的文件夹构建时frontend，backend如果您在 Visual Studio 上运行后端，您将看到 swagger UI。

但现在我只看到我的反应应用程序用户界面。https://localhost:44434/swagger我正在尝试使用或访问 swagger https://localhost:44434/swagger/index.html，但它只是停留在我的 React 应用程序 UI 页面上。

这是我尝试设置它的视频：

https://www.youtube.com/watch?v=RvwvFmO-56E

任何想法 ？多谢 ！

这是我的program.cs代码：

    using BugTracker.Context;
using Microsoft.EntityFrameworkCore;

var builder = WebApplication.CreateBuilder(args);

builder.Services.AddDbContext<ApplicationDbContext>(options =>
options.UseSqlServer(builder.Configuration.GetConnectionString("DefaultConnection")));

// Add services to the container.

builder.Services.AddControllersWithViews();
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();


// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{

    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    //app.UseHsts();
}
app.UseSwagger();
app.UseSwaggerUI();

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();


app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html"); ;

app.Run();

这是我的控制器代码：

using Microsoft.AspNetCore.Mvc;
using System;

namespace BugTracker.Controllers
{
    [ApiController]
    [Route("api/authentication")]
    public class AuthController : Controller
    {
        [HttpGet]
        public IActionResult Test()
        {
            return Ok("success");
        }
    }
}

Answer 1

除了添加 EndpointsApiExplorer 和 SwaggerGen 服务之外，您还必须修改客户端应用程序中的 setupProxy.js 文件并添加 swagger 端点。

您的 Program.cs 文件应如下所示：

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.

builder.Services.AddControllersWithViews();

builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

var app = builder.Build();

app.UseSwagger();
app.UseSwaggerUI();

// Configure the HTTP request pipeline.
if (!app.Environment.IsDevelopment())
{
    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
    app.UseHsts();
}

app.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();


app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

app.MapFallbackToFile("index.html");

app.Run();

你的 useProxy.js 文件应该如下所示：

const { createProxyMiddleware } = require('http-proxy-middleware');
const { env } = require('process');

const target = env.ASPNETCORE_HTTPS_PORT ? `https://localhost:${env.ASPNETCORE_HTTPS_PORT}` :
  env.ASPNETCORE_URLS ? env.ASPNETCORE_URLS.split(';')[0] : 'http://localhost:37316';

const context =  [
  "/swagger",
  "/weatherforecast",
];

module.exports = function(app) {
  const appProxy = createProxyMiddleware(context, {
    target: target,
    secure: false,
    headers: {
      Connection: 'Keep-Alive'
    }
  });

  app.use(appProxy);
};