按微软教程搭建的ASP.NET Web API与React SPA通信失败（504超时）

核心问题 #

你的代理配置目标端口错误，且对.NET项目的端口启动逻辑理解有误：

• React SPA默认运行在3000端口，代理需要将/weatherforecast请求转发到实际运行的API端口，而非随意指定端口。
• 你的.NET项目有两个启动配置：
  • API profile：运行在https://localhost:7036和http://localhost:5036
  • IIS Express profile：运行在http://localhost:8772
• 当前setupProxy里的目标端口8772是IIS Express的端口，但你实际启动的可能是API profile，导致代理转发到未运行的端口，触发504超时。

修复步骤 #

1. 确认API实际运行端口 #

启动.NET API项目后，查看控制台输出或浏览器打开的Swagger页面地址，确认API正在使用的端口（比如https://localhost:7036）。

2. 修改setupProxy.js配置 #

将代理目标改为API实际运行的端口，同时新增changeOrigin配置解决跨域Origin问题：

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

const context = [
    "/weatherforecast",
];

module.exports = function (app) {
    const appProxy = createProxyMiddleware(context, {
        target: 'https://localhost:7036', // 替换为API实际运行的端口
        secure: false,
        changeOrigin: true
    });

    app.use(appProxy);
};

3. 验证API可访问性 #

在浏览器直接访问https://localhost:7036/weatherforecast（替换为你的API端口），确认能返回JSON数据，排除API本身的问题。

4. 重启React项目 #

修改setupProxy.js后，必须重启React开发服务器，才能让新的代理配置生效。

额外注意事项 #

• 不要混淆.NET项目的不同启动profile：每次启动API时，确保选择的是你配置代理对应的profile（比如API或IIS Express）。
• 如果使用HTTP端口，目标地址要改成http://localhost:5036，保持协议一致。

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