React刷新浏览器报404？

作者站长头像
站长
· 阅读数 8

背景

前端由React构建。

后端使用Envoy作为流量网关，listeners的路由部分配置如下：

route_config:
  name: admin
  virtual_hosts:
    - name: admin
      domains: ["admin.example.com"]
      routes:
        - match:
            prefix: "/"
          route:
            cluster: admin

Envoy将下游请求代理到由Go编写的HTTP服务器，服务器内部路由的处理如下：

func main() {
    fs := http.FileServer(http.Dir("/path/to/build"))

    http.Handle("/", fs)

    if e := http.ListenAndServe(":80", nil); e != nil {
        panic(e)
    }
}

问题

只要带路径，刷新浏览器就报404。

疑惑

我知道是因为React Router的原因，也知道服务器为Nginx或者httpd时的解决方案。

但通过Envoy➕Go部署时，Envoy的prefix已经将所有路径的请求代理给了Go，而Go的http.Handle也已经将所有路径的请求都一律返回静态文件，不论客户端实际请求的是什么路径，不应该都是得到静态文件吗？怎么会得到404呢？

想不通，跪求大佬指教，抱拳。

回复
1个回答
avatar
test
2024-07-03

修改HTTP服务器路由处理逻辑，问题解决。

func main() {
    http.HandleFunc(
        "/", func(w http.ResponseWriter, r *http.Request) {
            http.ServeFile(w, r, "/path/to/build")
        },
    )

    if e := http.ListenAndServe(":80", nil); e != nil {
        panic(e)
    }
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容