ReactJS 如何理解应该在哪个端口上发出请求

Question

我有 ASP.NET 用于服务器的 Web API 和用于客户端的 ReactJS。我的问题是如何让服务器告诉客户端客户端应该在哪个端口发出请求。现在我的服务器端口是 7082 并且连接是硬编码的：

const request = await requester(urls.accounts + '/' + accountId, methods.get);

这里是 url:

export const urls = {
accounts: 'https://localhost:7082/api/accounts',
};

一切都在“https://localhost:7082 / api”，但是这个端口“7082”是我的电脑用的，其他的不一样。如何让别人下载应用时能够在不手动更改端口的情况下向服务器发起请求。

Answer 1

您应该使用 custom environment variables 以便针对不同的环境正确设置 url。

例如，您的 localhost:7082 将是您保留在 .env.local 文件中用于调试的内容。在服务器上部署后，您可以在 .env.production 文件中将相同的内容设置为 www.myapi.com，并且会在构建时处理。

export const urls = {
accounts: 'https://localhost:7082/api/accounts',
};
/*The above turns into the below */
export const urls = {
accounts: process.env.REACT_APP_API_URL,
};

您的 .env.local 文件：

REACT_APP_API_URL=https://localhost:7082

您的 .env.production 文件：

REACT_APP_API_URL=https://www.myapi.com

如果您询问如何让 localhost:7082 在一台计算机上和 localhost:8072 在另一台计算机上作为同一站点运行，并且可以从同一个 front-end 调用，这将需要您编写代码在 url 之间进行选择。理想情况下，如果您运行 api 跨越任何环境的多个服务器，则它们都应设置为完全相同的 url/port 组合，以便负载平衡器可以为您处理。

ReactJS 如何理解应该在哪个端口上发出请求

How ReactJS to understood on which port should make requests

asp.net-web-api

reactjs