Wie gehe ich mit 404-Fehlern um, wenn ein React-Frontend mit einem Go-Backend bereitgestellt wird?

So implementieren Sie Frontend-Routing in Go-Anwendungen

Problem:

Beim Zugriff auf eine bestimmte Wenn Sie direkt in Ihrem Browser den Pfad (/my_frontend_path) für eine Go-Anwendung eingeben, die das React-Frontend bereitstellt, tritt ein 404-Fehler auf. Dies liegt daran, dass der Go-Server den Pfad nicht erkennt, was zu einer Anforderung der Seite vom Server führt.

Lösung:

Um nicht erkannte Pfade an das Frontend zu delegieren React Router können Sie einen von mehreren Ansätzen implementieren:

1. Hash-Verlauf

Hash-Verlauf wird in der verlinkten Frage empfohlen und beinhaltet das Hinzufügen von # zur URL für clientseitiges Routing. Dadurch wird sichergestellt, dass der Server den Pfad nicht interpretiert und der Frontend-Router ihn verarbeiten kann.

2. Catch-All-Ansatz

Für eine rein serverseitige Lösung können Sie einen Catch-All-Ansatz implementieren, der index.html für jeden nicht erkannten Pfad zurückgibt. Dadurch wird sichergestellt, dass die Frontend-Anwendung geladen wird und der Router den Pfad entsprechend erkennen und weiterleiten kann.

So können Sie es in Go implementieren:

func main() {
    fs := http.FileServer(http.Dir(FSPATH))

    http.HandleFunc("/my_api", func(w http.ResponseWriter, _ *http.Request) { w.Write([]byte("API CALL")) })
    http.HandleFunc("/", func(w http.ResponseWriter, r *http.Request) {
        // If the requested file exists then return if; otherwise return index.html (fileserver default page)
        if r.URL.Path != "/" {
            fullPath := FSPATH + strings.TrimPrefix(path.Clean(r.URL.Path), "/")
            _, err := os.Stat(fullPath)
            if err != nil {
                if !os.IsNotExist(err) {
                    panic(err)
                }
                // Requested file does not exist so we return the default (resolves to index.html)
                r.URL.Path = "/"
            }
        }
        fs.ServeHTTP(w, r)
    })
    http.ListenAndServe(":8090", nil)
}

Hinweis: Dieser Ansatz gibt index.html für alle nicht erkannten Pfade zurück, einschließlich nicht vorhandener Dateien. Sie können erwägen, Einschränkungen hinzuzufügen, z. B. die Überprüfung von Dateierweiterungen, wenn dies ein Problem darstellt.

Das obige ist der detaillierte Inhalt vonWie gehe ich mit 404-Fehlern um, wenn ein React-Frontend mit einem Go-Backend bereitgestellt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!