如何使用代理與 reactjs 建立鏈接

Question

我在一個網站上工作，前端使用 Reactjs 和 Typescript，后端使用 Java。 在開發過程中，我將 3000 端口用於前端，將 8080 端口用於后端。 我已經在package.json上設置了代理屬性

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

所以我在向后端發出請求時沒有任何問題，因為代理工作得很好。

現在我需要創建一些鏈接來下載報告，所以我正在動態生成鏈接，我需要它們指向端口8080而不是端口3000

我正在傳遞網址，如：

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

this.state.url看起來像/reports/download/users並且有意義它指向http://3000/reports/download/users

知道如何在 dev 中創建指向端口 8080 的鏈接。

更新

代理正在處理類似於以下代碼的請求：

   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>

Answer 1

我使用了一個我認為不是很好的解決方案，但它對我有用。

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

你可以有一些指向你的開發服務器的全局變量，你可以用它代替http://localhost:8000

• 更新：代替硬編碼 URL，您可以設置環境變量Create-react-app 環境變量

Answer 2

您不應使用proxy屬性來設置后端基本 url。 根據文檔：

請記住， proxy僅在開發中有效（使用npm start ），由您來確保/api/todos類的 URL 指向生產中的正確內容。

當你構建你的應用程序時，它不會工作。

您應該為后端基本 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>