使用Wails+React+Echo暴露API端点遭遇404错误求助

我正在使用Wails结合React.js开发桌面应用，希望暴露一个简单的API端点。后端采用Echo框架实现端点，前端通过Axios组件发起请求。但无论使用Postman还是UI发起请求，均返回404（Not Found）错误。

相关代码 #

后端主函数代码 #

package main

var assets embed.FS

func main() {
    app := NewApp()

    b := new(traffic.ErlangB) // 注：原代码此处缺失闭合括号，已修正

    go func() {
        e := echo.New()
        e.Use(middleware.CORS())

        e.POST("/traffic/calculate-traffic", handlers.Calc_traffic_Handler)
        e.Start(":5173")
    }()

    err := wails.Run(&options.App{
        Title:      "My App",
        Width:      620,
        Height:     641,
        Fullscreen: false,

        AssetServer: &assetserver.Options{
            Assets: assets,
        },
        BackgroundColour: &options.RGBA{R: 27, G: 38, B: 54, A: 1},
        OnStartup:        app.startup,
        Bind: []interface{}{
            app,
            b,
        },
    })
    if err != nil {
        println("Error:", err.Error())
    }
}

Handler函数代码 #

func Calc_traffic_Handler(c echo.Context) error {
    var params struct {
        GoS             float64
        Num_of_channels int
    }
    if err := c.Bind(&params); err != nil {
        return echo.NewHTTPError(422, "Invalid Request Body")
    }
    b := traffic.ErlangB{}
    result := traffic.ErlangB.Calc_traffic(b, params.GoS, params.Num_of_channels)

    return c.JSON(http.StatusOK, result)
}

前端Axios代码 #

const handleClick = async () => {
    console.log(num_of_channels, gos)
    try {
      const res = await axios.post(
        "http://localhost:5173/traffic/calculate-traffic",
        {
          gos: gos,
          num_of_channels: num_of_channels,
        }
      ).then(res => console.log(res)).catch(err => console.error("Axios Errorrr: ", err))
      setTraffic(res.data);
    } catch (error) {
      console.error("Error: " + error);
    }
};

错误信息 #

POST http://localhost:5173/traffic/calculate-traffic 404 (Not Found)

解决方案 #

1. 修复语法错误 #

原主函数中b := new(traffic.ErlangB缺失闭合括号，导致程序无法正常编译运行，必须修正为b := new(traffic.ErlangB)。

2. 解决端口冲突（核心问题） #

Wails在开发模式下，默认会将前端Vite服务器运行在5173端口，而你的Echo服务器也尝试绑定该端口，导致Echo服务器启动失败，因此所有请求都会返回404。解决步骤：

• 修改Echo服务器的监听端口，例如改为:8080：

  e.Start(":8080")
  

• 同步修改前端Axios的请求地址：

  const res = await axios.post(
    "http://localhost:8080/traffic/calculate-traffic",
    // ...其他参数
  )
  

3. 额外优化建议 #

• Handler中的traffic.ErlangB.Calc_traffic(b, ...)如果是实例方法调用，应改为b.Calc_traffic(params.GoS, params.Num_of_channels)，避免冗余的类型方法调用。
• 可以给Echo服务器添加启动日志，确认服务器是否正常运行：

  go func() {
      e := echo.New()
      e.Use(middleware.CORS())
      e.POST("/traffic/calculate-traffic", handlers.Calc_traffic_Handler)
      if err := e.Start(":8080"); err != nil && err != http.ErrServerClosed {
          log.Fatalf("Echo server failed to start: %v", err)
      }
  }()
  

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