我创建了一个全栈 Web API 应用程序，其中前端是带有 React.js 的 ASP.NET Core（我使用 React vite），后端是 C# 类库。 我成功地将 IIS 上的前端部署到 loacalhost:80。当我从 IIS 浏览该网站时，我看到了我创建的加载图标，这表明前端已正确部署，但问题是加载永远不会停止，因为 axios 请求“/api/account/” getcurrentuser”给出 404 错误。后端找不到http://localhost:80/api/account/getcurrentuser。
所有 axios 请求都会发生这种情况。服务器返回 404 表示找不到资源。它查找的物理路径是 C:\Website\EDIConverterDemo\wwwroot pi ccount\getcurrentuser。 wwwroot 文件夹是我的项目的部署文件夹中的文件夹。它应该看起来在那里并且我需要添加一些东西，还是它被定向到错误的地方？
该应用程序在本地运行时完美运行（不是在 IIS 上），并且我的控制器中的路由与我的 axios GET 请求中的 url 相匹配。
我认为我可能还需要部署后端类库，但对此的一些研究告诉我，我不需要单独部署它。 我认为我的问题是一个反应问题，特别是因为我正在使用 vite。
这是我的 vite.config.js 文件。 是CORS问题还是vite代理问题？当我在本地（不是在 IIS 上）运行我的项目时，React 前端基于端口 3000，而所有以“/api”开头的调用都会重新路由到托管在端口 7264 上的控制器。我是否需要更改代理中的端口？
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
port: 3000,
strictPort : true,
proxy: {
'/api' : {
target: 'https://localhost:7264',
changeOrigin: true,
secure: false,enter image description here
rewrite: (path) => path.replace(/^\/api/, '/api')
}
}
}
})
或者可能是后端的问题？
这是 /api/account/getcurrentuser 应该转到的控制器：
namespace EDIConverterWeb.Web.Controllers
{
[Route("api/[controller]")]
[ApiController]
public class AccountController : ControllerBase
{
[HttpGet]
[Route("getcurrentuser")]
public User GetCurrentUser()
{
//here is some code that returns null if no user is signed in
//otherwise, returns the currently logged-in user (object)
}
}
}
这是我的 Program.cs 文件：
是否配置错误导致控制器丢失？
namespace EDIConverterWeb.Web
{
public class Program
{
private static string CookieScheme = "EDIConverter";
public static void Main(string[] args)
{
var builder = WebApplication.CreateBuilder(args);
builder.Services.AddAuthentication(CookieScheme)
.AddCookie(CookieScheme, options =>
{
options.Events = new CookieAuthenticationEvents
{
OnRedirectToLogin = context =>
{
context.Response.StatusCode = 403;
context.Response.ContentType = "application/json";
var result = System.Text.Json.JsonSerializer.Serialize(new { error = "You are not authenticated" });
return context.Response.WriteAsync(result);
}
};
});
builder.Services.AddSession();
// Add services to the container.
builder.Services.AddControllersWithViews();
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.UseHttpsRedirection();
app.UseStaticFiles();
app.UseRouting();
app.UseSession();
app.UseAuthentication();
app.UseAuthorization();
app.MapControllerRoute(
name: "default",
pattern: "{controller}/{action=Index}/{id?}");
app.MapFallbackToFile("index.html"); ;
app.Run();
}
}
}
这就是我的 web.config 文件的样子：
<?xml version="1.0"?>
<configuration>
<system.webServer>
<rewrite>
<rules>
<rule name="React Routes" stopProcessing="true">
<match url=".*" />
<conditions logicalGrouping="MatchAll">
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
<add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
</conditions>
<action type="Rewrite" url="/" />
</rule>
</rules>
</rewrite>
</system.webServer>
</configuration>
更新： 我不认为这是 React 的问题，你能帮我弄清楚如何让我的应用程序的 API 部分在部署上运行吗？
我的 Vite-React 应用程序也遇到了类似的问题。 我相信下面列出的解决方案与您的问题直接相关。
ReactVite Express NodeJs Azure 应用程序服务。 404 您要查找的资源已被删除、更名或暂时不可用
通过部署到 Azure 容器的 Azure 应用服务使用我的 NodeJS 应用程序运行 Express 服务器
物理路径 C:\Website\EDIConverterDemo\wwwroot pi ccount\getcurrentuser 您现在仅提供静态文件。
它看起来也不像 CORS 问题。
总体来说，我认为是配置问题，物理路径应该是路由文件。
应用程序部署在 IIS 上，但部署在哪里？在 VM 上或作为 Azure Web 应用程序，这非常重要，因为目标链接和端口配置可能会根据 IIS 环境而变化。