reactj가 있는 링크에 프록시를 사용하는 방법

reactj가 있는 링크에 프록시를 사용하는 방법

나는 프런트엔드에 리액션과 타이프스크립트를 사용하는 웹사이트에서 일하고 있고 백엔드는 자바에 있어.개발 중에 프런트엔드는 포트 3000, 백엔드는 포트 8080을 사용한다.나는 패키지에 프록시 속성을 설정했다.json

"proxy": "http://localhost:8080"

그래서 나는 대리인이 완벽하게 작동하기 때문에 백엔드에 요청을 하는 동안 아무런 문제가 없어.

이제 보고서를 다운로드하기 위한 링크를 만들어야 하니까 동적으로 링크를 생성하는 중이고 포트 3000이 아닌 포트 8080을 가리키도록 해야 해.

나는 다음과 같이 URL을 전달하고 있다.

<a href={this.state.url}>Download Report</a>

여기서, this.state.properties.user는 /snf/snf/user와 닮았고 http:///3000/snf/users를 가리키는 것을 이해한다.

포트 8080을 가리키도록 dev에 링크를 만드는 방법에 대한 아이디어.

업데이트됨

프록시가 아래 코드와 같은 요청을 사용하여 작업 중:

   fetch('./app/admin/reports/availableReports')
    .then(res => res.json())
    .then(json => json.reportTypes)
    .catch(ex => {
        console.log('Alert!!', ex)
        return []
    })

그러나 URL 링크를 생성할 때 작동하지 않음:

<a href={'app' + this.state.currentDownloadUrl}>Download Report</a>

내 생각에 아주 좋은 해결책은 아닌 것 같은데, 나한테는 효과가 있어.

<a href={`http://localhost:8000${record_detail_item.file}`} download>Download File</a>

개발 서버를 가리키는 전역 변수를 가질 수 있고 대신 사용할 수 있다.http://localhost:8000

• 업데이트: URL을 하드코딩하는 대신 환경 변수를 설정할 수 있음 react-app 환경 변수 생성

너는 그 제품을 사용해서는 안 된다.proxy백엔드 기준 URL을 설정하는 속성.문서에 따라:

는 것을 명심해라proxy오직 개발에만 효과가 있다npm start() 및 URL이 다음과 같은지 확인하는 것은 귀하에게 달려 있다./api/todos생산에 있어서 올바른 것을 지적하다

앱을 만들면 작동이 안 돼.

백엔드 기본 URL에 환경 변수를 추가하고 백엔드 호출 시 미리 전송하십시오.

뭐랄까

   fetch(`${process.env.REACT_APP_API_ENDPOINT}/app/admin/reports/availableReports`)
    .then(res => res.json())
    .then(json => json.reportTypes)
    .catch(ex => {
        console.log('Alert!!', ex)
        return []
    })

<a href={`${process.env.REACT_APP_API_ENDPOINT}${this.state.currentDownloadUrl}`}>Download Report</a>

참조URL: https://stackoverflow.com/questions/54197923/how-to-use-a-proxy-for-a-link-with-reactjs