Bagaimanakah Saya Boleh Membetulkan Ralat '404 Not Found' Apabila Menghalakan React Frontend dengan Go Backend?

Mengubah hala ke Penghalaan Frontend dalam Go

Ketidakupayaan untuk mengakses laluan frontend menggunakan URL seperti http://localhost:8090/my_frontend_path apabila menjalankan kedua-dua bahagian belakang Go dan Bahagian hadapan tindak balas boleh dikaitkan dengan isu asas:

The Root Sebab

Apabila anda mengakses http://localhost:8090/my_frontend_path daripada penyemak imbas, penghala React bahagian hadapan belum lagi aktif. Oleh itu, penyemak imbas meminta halaman daripada pelayan. Walau bagaimanapun, my_frontend_path tidak wujud dalam folder binaan, membawa kepada ralat 404 "Halaman Tidak Ditemui".

Penyelesaian Sisi Pelayan yang Mudah

Satu cara mudah untuk membetulkan isu ini ialah dengan melaksanakan pendekatan "catch-all" di peringkat pelayan Go. Ini melibatkan pengembalian index.html (dan akibatnya apl anda) untuk mana-mana laluan yang tidak dikendalikan secara eksplisit di tempat lain. Berikut ialah contoh:

const FSPATH = "./build/"

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, return it; 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)
}

Kod ini menyemak kewujudan fail yang diminta. Jika ia tidak wujud, ia menukar laluan yang diminta kepada "/", yang akan mengubah hala ke index.html dan membenarkan penghala React mengendalikan penghalaan.

Alternatif Sejarah Hash

Satu lagi pilihan ialah menggunakan sejarah cincang untuk aplikasi React anda. Dengan kaedah ini, permintaan awal ke URL my_frontend_path tidak akan berinteraksi dengan pelayan Go. Sebaliknya, ia akan dikendalikan sepenuhnya oleh penghala React. Sejarah cincang boleh dikonfigurasikan dalam fungsi createBrowserHistory atau createHashHistory apl React anda.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membetulkan Ralat '404 Not Found' Apabila Menghalakan React Frontend dengan Go Backend?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!