如何在Reactjs中使用代理链接

Question

我正在使用Reactjs和Typescript开发网站，前端使用端口3000，后端使用Java并使用端口8080。我在开发时，在package.json上设置了代理属性。

Translated:

我正在使用 Reactjs 和 Typescript 开发一个网站，前端使用端口 3000，后端使用 Java 并使用端口 8080。在开发过程中，我已经在 package.json 文件中设置了代理属性。

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

所以在向后端发送请求时，我没有任何问题，因为代理工作得很完美。

现在我需要创建一些用于下载报告的链接，因此我正在动态生成这些链接，并且需要它们指向端口 8080 而不是端口 3000

我像这样传递URL：

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

this.state.url 看起来像 /reports/download/users，并且指向 http://3000/reports/download/users 是有意义的。

有什么办法可以在开发中创建链接，使其指向端口8080。

更新

代理正在使用以下代码进行请求：

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

但是当我生成一个链接时，它就不起作用了：

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

- gon250

---

这不就是代理所做的吗？你请求 http://localhost:3000/reports/download/users，而代理将其指向了 :8080。使用代理的好处是，即使前端和后端在开发中运行在不同的端口上，你仍然可以使用相对路径来访问所有内容。 - jonrsharpe

是的，但它在链接上不起作用，只有在我通过fetch请求时才有效，但当我使用URL链接时，它总是指向端口3000（我的意思是前端）@jonrsharpe - gon250

当您单击它们时，代理是否未能工作？ - jonrsharpe

代理只能在异步请求时生效，但如果链接总是指向前端端口，则无法解决此问题。我不知道该怎么办。 - gon250

Answer 1

我使用了一种不是很好的解决方案，但它适用于我。

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

你可以创建一个指向开发服务器的全局变量，而不是使用 http://localhost:8000

• 更新: 你可以设置环境变量来代替硬编码URL Create-react-app 环境变量

- Jasurbek Nabijonov

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>

- known-as-bmf