Go バックエンドで React フロントエンドを提供するときに 404 エラーを処理する方法は?

Go アプリケーションでフロントエンド ルーティングを実装する方法

問題:

特定のReact を提供する Go アプリケーションのパス (/my_frontend_path) をブラウザーに直接追加します。フロントエンドで 404 エラーが発生します。これは、Go サーバーがパスを認識せず、サーバーからページのリクエストが発生するためです。

解決策:

認識されないパスをフロントエンドに委任するにはReact Router では、次のいくつかのアプローチのいずれかを実装できます。

1.ハッシュ履歴

リンクされた質問ではハッシュ履歴が推奨されており、クライアント側のルーティングのために URL に # を追加する必要があります。これにより、サーバーがパスを解釈せず、フロントエンド ルーターがパスを処理できるようになります。

2.キャッチオール アプローチ

純粋にサーバー側のソリューションの場合、認識されないパスに対して Index.html を返すキャッチオール アプローチを実装できます。これにより、フロントエンド アプリケーションが確実にロードされ、ルーターがそれに応じてパスを検出してルーティングできるようになります。

Go で実装する方法は次のとおりです。

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)
}

注: このアプローチでは、存在しないファイルを含む、すべての認識されないパスのindex.htmlが返されます。問題が発生する場合は、ファイル拡張子を確認するなどの制限を追加することを検討してください。

以上がGo バックエンドで React フロントエンドを提供するときに 404 エラーを処理する方法は?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。