asp.net-core - 启动我的应用程序时无法访问 swagger UI

Question

我使用的是 ASP.NET core 6，我使用 react 选项创建了我的应用程序(所以我的文件夹中有一个 ClientApp)。

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

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

但现在我只能看到我的 React 应用程序 UI。我正在尝试使用 https://localhost:44434/swagger 或 https://localhost:44434/swagger/index.html 访问 swagger，但它只是保持打开状态我的 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();

这是我的 Controller 代码:

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