> 백엔드 개발 > Golang > Go 백엔드를 사용하여 React 프론트엔드를 라우팅할 때 '404 찾을 수 없음' 오류를 어떻게 수정할 수 있나요?

Go 백엔드를 사용하여 React 프론트엔드를 라우팅할 때 '404 찾을 수 없음' 오류를 어떻게 수정할 수 있나요?

DDD
풀어 주다: 2024-12-29 18:51:09
원래의
480명이 탐색했습니다.

How Can I Fix

Go에서 프런트엔드 라우팅으로 리디렉션

Go 백엔드와 Go 백엔드를 모두 실행할 때 http://localhost:8090/my_frontend_path와 같은 URL을 사용하여 프런트엔드 경로에 액세스할 수 없음 React 프론트엔드는 근본적인 문제에 기인할 수 있습니다:

The Root 원인

브라우저에서 http://localhost:8090/my_frontend_path에 접속하면 프론트엔드 React 라우터가 아직 활성화되지 않은 상태입니다. 따라서 브라우저는 서버에 페이지를 요청합니다. 그러나 my_frontend_path가 빌드 폴더에 존재하지 않아 404 "페이지를 찾을 수 없음" 오류가 발생합니다.

간단한 서버측 솔루션

이 문제를 해결하는 한 가지 간단한 방법은 다음과 같습니다. Go 서버 수준에서 "포괄적" 접근 방식을 구현합니다. 여기에는 다른 곳에서 명시적으로 처리되지 않은 모든 경로에 대해 index.html(결과적으로 앱)을 반환하는 작업이 포함됩니다. 예는 다음과 같습니다.

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)
}
로그인 후 복사

이 코드는 요청된 파일이 있는지 확인합니다. 존재하지 않는 경우 요청된 경로를 "/"로 변경합니다. 그러면 index.html로 리디렉션되고 React 라우터가 라우팅을 처리할 수 있습니다.

해시 기록 대안

또 다른 옵션은 React 애플리케이션에 해시 기록을 사용하는 것입니다. 이 방법을 사용하면 my_frontend_path URL에 대한 초기 요청이 Go 서버와 상호 작용하지 않습니다. 대신 React 라우터에 의해 전적으로 처리됩니다. 해시 기록은 React 앱의 createBrowserHistory 또는 createHashHistory 함수에서 구성할 수 있습니다.

위 내용은 Go 백엔드를 사용하여 React 프론트엔드를 라우팅할 때 '404 찾을 수 없음' 오류를 어떻게 수정할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿