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

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

Barbara Streisand

リリース： 2024-12-14 15:26:15

オリジナル

150 人が閲覧しました

How to Handle 404 Errors When Serving a React Frontend with a Go Backend?

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 サイトの他の関連記事を参照してください。