在Visual Studio中加载.NET Core+React项目遇404错误求助

1. 确认项目启动配置 #

• 检查Visual Studio启动项：必须选择项目根名称（而非单独的API或ClientApp），模板默认是同时启动前后端服务，单独启动某一端会导致对应端口无服务。
• 查看launchSettings.json的profiles节点，确保commandName为Project，而非ProjectKestrel，后者仅启动后端API。

2. 统一端口配置细节 #

• 后端launchSettings.json配置：
  确保applicationUrl和iisSettings.sslPort均设置为目标端口7049，示例：

  "profiles": {
    "YourProjectName": {
      "commandName": "Project",
      "dotnetRunMessages": true,
      "launchBrowser": true,
      "applicationUrl": "https://localhost:7049;http://localhost:5049",
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      }
    },
    "IIS Express": {
      "commandName": "IISExpress",
      "launchBrowser": true,
      "environmentVariables": {
        "ASPNETCORE_ENVIRONMENT": "Development"
      },
      "iisSettings": {
        "windowsAuthentication": false,
        "anonymousAuthentication": true,
        "iisExpress": {
          "applicationUrl": "http://localhost:5049",
          "sslPort": 7049
        }
      }
    }
  }
  

• 前端setupProxy.js配置：
  确保代理目标指向后端HTTPS端口，添加secure: false跳过本地HTTPS证书验证，示例：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      '/api',
      createProxyMiddleware({
        target: 'https://localhost:7049',
        changeOrigin: true,
        secure: false
      })
    );
  };
  

3. 清理缓存并重启服务 #

• 关闭Visual Studio，删除项目根目录下的bin、obj文件夹，以及React项目（通常是ClientApp）下的node_modules和package-lock.json文件。
• 重新打开项目，进入ClientApp目录执行npm install安装依赖，再重新启动项目。

4. 单独验证前后端服务 #

• 前端验证：手动进入ClientApp目录执行npm start，查看是否能正常打开http://localhost:3000（前端默认开发端口），若能打开则说明前端自身无问题，问题出在VS联动启动配置。
• 后端验证：直接访问https://localhost:7049/api/weatherforecast，若能返回JSON数据则后端服务正常；若也返回404，需检查后端路由配置和启动日志，排查API是否正常注册。

内容的提问来源于stack exchange，提问作者Anda Sizani