reactjs - 如何使用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/用户

知道如何在 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

• 更新: 您可以设置环境变量Create-react-app environment variables，而不是硬编码URL