Raspberry Pi 上的 ASP.NET Core + React + Node.js 代理请求不起作用

Question

我尝试使用 Visual Studio 中提供的基本模板创建一个相对简单的网站，并已集成 React（以及据我所知，Node.js）。但是，我在将请求从 Node.js 处理程序重定向到 ASP.NET Core 时遇到了问题。虽然该项目在我的计算机上运行顺利，但在我的 Raspberry Pi 上尝试相同的操作时遇到了错误：

[HPM] 代理请求 192.168.0.101:44463/登录到 http://192.168.0.101:5124/ [ECONNRESET] 时发生错误 (https://nodejs.org/api/errors.html#errors_common_system_errors )

在浏览器中：

关于 IP 地址：

• 从电脑192.168.0.100连接；
• ASP.NET Core 和反应位于 192.168.101；
• ASP.NET Core 端口 5124，反应端口 44463

setupProxy.js

代码：

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

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

const context = [
    "/login",
    "/registration",
    "/tokenvalidation",
    "/statistic",
];

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

    app.use(appProxy);
};

Program.cs

文件：

using Microsoft.AspNetCore.Authentication.JwtBearer;
using Microsoft.IdentityModel.Tokens;
using CheckersOnlineSPA.ClientApp;
using Microsoft.EntityFrameworkCore;
using CheckersOnlineSPA.Data;
using CheckersOnlineSPA.Services.OnlineClientsWatcher;
using CheckersOnlineSPA.Services.Browser;
using Microsoft.AspNetCore.WebSockets;
using CheckersOnlineSPA.Services.Games;

var builder = WebApplication.CreateBuilder(args);

builder.WebHost.UseUrls("http://192.168.0.101:5124");

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        builder =>
        {
            builder.AllowAnyOrigin()
                   .AllowAnyMethod()
                   .AllowAnyHeader();
        });
});

builder.Services.AddDataProtection();
builder.Services.AddControllersWithViews();
builder.Services.AddAuthorization();
builder.Services.AddSingleton<BrowserController>();
//builder.Services.AddSingleton<OnlineClientsWatcher>();
builder.Services.AddSingleton<GamesController>();

builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(options =>
    {
        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidIssuer = Auth.AuthOptions.ISSUER,
            ValidateAudience = true,
            ValidAudience = Auth.AuthOptions.AUDIENCE,
            ValidateLifetime = true,
            IssuerSigningKey = Auth.AuthOptions.GetSymmetricSecurityKey(),
            ValidateIssuerSigningKey = true
        };
    });

string conn = "Server=192.168.0.101;Database=checkers;Uid=dimon;Pwd=qwerty123123;";
builder.Services.AddDbContext<DatabaseContext>(options => options.UseMySql(conn, ServerVersion.AutoDetect(conn)));

var app = builder.Build();

app.UseCors();
app.UseStaticFiles();
app.UseRouting();
app.UseWebSockets();
app.UseAuthentication();
app.UseAuthorization();

app.UseMiddleware<GameMiddleware>();
app.UseMiddleware<BrowserMiddleware>();
//app.UseMiddleware<ClientsCounterMiddleware>();

app.MapPost("/login", Auth.LoginHandler);
app.MapPost("/registration", Auth.RegistrationHandle);
app.MapPost("/tokenvalidation", Auth.TokenValidationHandler);
app.MapPost("/statistic", ClientsActivity.GetClientsActivityHandler );

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

app.Run();

github上的整个项目：

github上的源代码

Answer 1

当 VS2022 在开发环境中启动项目时，React 项目将启用端口

44463

，并且您的 ASP.NET Core 使用端口

5124

。

但是在发布的文件中，React 项目会被编译成静态资源文件并通过 app.UseStaticFiles(); 进行处理，

所以你的树莓派中只启用了一个端口。

所以你需要更改以下代码：

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

只要确保发布的前端和后端端口一致即可。