ASP.NET Core MVC+React项目新增API端点返回HTML问题排查

1. 检查setupProxy.js的匹配顺序与规则 #

React代理中间件（http-proxy-middleware）按配置顺序匹配路径，若静态文件路由（如/*）优先于API代理规则，会导致/sitemap被识别为静态资源返回index.html。需确保API代理规则放在最前面：

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

module.exports = function(app) {
  // 优先配置/sitemap代理
  app.use(
    '/sitemap',
    createProxyMiddleware({
      target: 'https://localhost:7245',
      changeOrigin: true,
      // 若后端路由不带/sitemap前缀，可添加路径重写
      // pathRewrite: { '^/sitemap': '' }
    })
  );

  // 再配置WeatherForecast代理（保留原有有效配置）
  app.use(
    '/weatherforecast',
    createProxyMiddleware({
      target: 'https://localhost:7245',
      changeOrigin: true
    })
  );
};

2. 验证前端fetch请求的正确性 #

确保前端调用路径、请求方法与后端一致，同时添加响应类型校验：

fetch('/sitemap')
  .then(res => {
    if (!res.ok) throw new Error('请求失败');
    // 确认响应为JSON类型
    if (res.headers.get('content-type')?.includes('application/json')) {
      return res.json();
    } else {
      throw new Error('返回内容非JSON');
    }
  })
  .then(data => console.log(data))
  .catch(err => console.error(err));

3. 检查ASP.NET Core端点路由配置 #

确认Sitemap控制器的路由属性无冲突，确保直接匹配/sitemap路径：

[ApiController]
[Route("sitemap")] // 明确路由路径
public class SitemapController : ControllerBase
{
    [HttpGet]
    public IActionResult GetSitemap()
    {
        // 站点地图JSON返回逻辑
        return Ok(new { /* 你的站点地图数据 */ });
    }
}

4. 排查代理路径重写问题 #

若后端实际路由为带前缀的形式（如/api/sitemap），需在代理配置中添加路径重写：

app.use(
  '/sitemap',
  createProxyMiddleware({
    target: 'https://localhost:7245',
    changeOrigin: true,
    pathRewrite: { '^/sitemap': '/api/sitemap' } // 映射到后端真实路由
  })
);

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

浏览器缓存的静态资源可能拦截请求，清理浏览器缓存后，重启React开发服务器与ASP.NET Core后端，确保配置生效。

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