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

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
GO에서 루프를 어떻게 만들 수 있습니까?GO에서 루프를 어떻게 만들 수 있습니까?Apr 28, 2025 pm 05:06 PM

기사는 'for', 루프 유형, 최적화 기술 및 피할 수있는 일반적인 실수를 사용하여 루프 생성에 대해 논의합니다. 주요 초점은 이동 중에 효과적인 루프 사용에 있습니다. [159 자]

GO에서 함수를 만드는 구문은 무엇입니까?GO에서 함수를 만드는 구문은 무엇입니까?Apr 28, 2025 pm 05:05 PM

이 기사는 매개 변수, 반환 유형, 이름의 반환 값 및 기능 이름 지정 규칙을 포함하여 GO에서 기능을 만드는 구문 및 모범 사례에 대해 설명합니다.

Golang은 어떤 데이터 유형을 사용합니까?Golang은 어떤 데이터 유형을 사용합니까?Apr 28, 2025 pm 05:03 PM

Golang은 다양한 데이터 표현을 위해 bool, int, uint, float, string 및 rune과 같은 다양한 데이터 유형을 사용합니다. int와 uint의 주요 차이점과 String vs. Rune의 사용에 대해 논의합니다.

GO 대 기타 언어 : 비교 분석GO 대 기타 언어 : 비교 분석Apr 28, 2025 am 12:17 AM

goistrongchoiceforprojectsneedingsimplicity, performance, and concurrency, butitmaylackinadvancedfeaturesandecosystemmaturity.1) go'ssyntaxissimpleandeasytolearn, go'ssyntaxissimpleandeasytolearn, theadtofewerbugsandmoremaintainablecode, theitlacksfeaturecomecemememecememememecememememememememememecemememememecemememecemememecemememecemecemecode

GO의 Go Intatic Initializers와 다른 언어의 시작 기능 비교GO의 Go Intatic Initializers와 다른 언어의 시작 기능 비교Apr 28, 2025 am 12:16 AM

go'sinitfunctionandjava'sstaticinitializersbothservetosetupenvironmentmentsbotheforethemainfunction, buttheydifferinexecutionandcontrol.go'sinitissimpleandautomatic, 적합한 적절한 소제 세트 비트 캔 리드 토프 렉스 오버러스

GO의 Init 기능에 대한 일반적인 사용 사례GO의 Init 기능에 대한 일반적인 사용 사례Apr 28, 2025 am 12:13 AM

theinitfunctioningoare에 대한 thecommonusecases : 1) loadingConfigurationFiles는 eprogramStarts, 2) 초기화 GlobalVaribles, 및 3) runningpre-checksorvalidationsforeprogramProeceeds

GO의 채널 : 고루 간 통신 마스터 링GO의 채널 : 고루 간 통신 마스터 링Apr 28, 2025 am 12:04 AM

channelsarecrucialingoforenablingsafeandeforcommunicationbetwengoroutines.theyfacilitatesynchronizationandmanagegoroutineLifeCycle, EssentialForConcurrentProgramming.ChannelSAldAllowSendingEndAvivingValues, ActAssignalsForsyNchronization 및 관리

이동 중 오류 : 오류 체인에 컨텍스트 추가이동 중 오류 : 오류 체인에 컨텍스트 추가Apr 28, 2025 am 12:02 AM

GO에서 오류를 줄이고 오류를 통해 컨텍스트를 추가 할 수 있습니다. 1) 오류 패키지의 새로운 기능을 사용하면 오류 전파 중에 컨텍스트 정보를 추가 할 수 있습니다. 2) fmt.errorf 및 %w를 통해 오류를 포장하여 문제를 찾는 데 도움이됩니다. 3) 사용자 정의 오류 유형은 더 많은 의미 론적 오류를 만들고 오류 처리의 표현 능력을 향상시킬 수 있습니다.

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

Video Face Swap

Video Face Swap

완전히 무료인 AI 얼굴 교환 도구를 사용하여 모든 비디오의 얼굴을 쉽게 바꾸세요!

뜨거운 도구

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Linux 새 버전

SublimeText3 Linux 새 버전

SublimeText3 Linux 최신 버전

DVWA

DVWA

DVWA(Damn Vulnerable Web App)는 매우 취약한 PHP/MySQL 웹 애플리케이션입니다. 주요 목표는 보안 전문가가 법적 환경에서 자신의 기술과 도구를 테스트하고, 웹 개발자가 웹 응용 프로그램 보안 프로세스를 더 잘 이해할 수 있도록 돕고, 교사/학생이 교실 환경 웹 응용 프로그램에서 가르치고 배울 수 있도록 돕는 것입니다. 보안. DVWA의 목표는 다양한 난이도의 간단하고 간단한 인터페이스를 통해 가장 일반적인 웹 취약점 중 일부를 연습하는 것입니다. 이 소프트웨어는

맨티스BT

맨티스BT

Mantis는 제품 결함 추적을 돕기 위해 설계된 배포하기 쉬운 웹 기반 결함 추적 도구입니다. PHP, MySQL 및 웹 서버가 필요합니다. 데모 및 호스팅 서비스를 확인해 보세요.

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기