React无法向本地异端口Uvicorn后端发送HTTP请求的原因咨询

问题描述 #

我使用React作为前端框架，Uvicorn作为后端服务，二者部署在同一台机器但端口不同。目前遇到两个核心问题：

1. 前端通过http://127.0.0.1:[BACKEND_PORT]/backend_call或http://localhost:[BACKEND_PORT]/backend_call发送请求时，报错ERR_CONNECTION_REFUSED；但改用域名http://MYDOMAIN:[BACKEND_PORT]/backend_call就能正常获取响应。
2. Uvicorn后端若绑定127.0.0.1则完全无法被访问，必须绑定0.0.0.0才能正常运行。

当前仅后端绑定0.0.0.0+前端用域名请求的方式可行，但我认为这种方式存在安全隐患且不够稳定，想明确无法使用localhost或127.0.0.1访问后端的原因。

问题根源分析 #

1. Uvicorn绑定127.0.0.1无法被前端访问的原因 #

当Uvicorn绑定127.0.0.1时，服务仅监听本地回环接口，这个接口仅接收来自机器内部进程的请求（比如在服务器终端用curl访问127.0.0.1）。但React前端是运行在用户浏览器中的——即便浏览器和后端在同一台机器，浏览器发起的请求属于外部网络请求，不会走本地回环接口，自然无法连接到绑定127.0.0.1的Uvicorn服务。

而绑定0.0.0.0时，Uvicorn会监听机器上所有可用的网络接口（包括公网网卡、局域网接口等），浏览器通过域名解析到服务器的公网/局域网IP后，就能正常建立连接。

2. 前端用localhost/127.0.0.1请求失败的原因 #

前端代码中写的127.0.0.1或localhost，是相对于浏览器所在机器的回环地址，而非后端所在服务器的回环地址。举个例子：如果React项目部署在服务器上，用户通过浏览器访问前端页面时，浏览器发起的http://127.0.0.1:[BACKEND_PORT]请求，会试图连接用户自己电脑的对应端口，而非服务器上的后端服务——这必然连接失败，因为用户电脑上并没有运行该端口的Uvicorn服务。

而使用域名MYDOMAIN时，域名会解析到服务器的公网/局域网IP，浏览器向该IP发起请求，正好命中绑定0.0.0.0的后端服务，因此能正常响应。

安全且稳定的解决方案 #

如果想避免绑定0.0.0.0的安全风险，同时实现更安全的后端访问，可采用以下两种方案：

• 反向代理（推荐）：使用Nginx或Apache做反向代理，让前端和后端共享同一个域名和端口，通过路径区分请求。比如前端请求/api/backend_call，Nginx自动转发到127.0.0.1:[BACKEND_PORT]/backend_call。这种情况下，Uvicorn可以绑定127.0.0.1，完全对外隐藏后端端口，安全性大幅提升。
• 本地开发环境配置：如果是本地开发，在React的package.json中配置proxy字段，将前端的API请求代理到http://127.0.0.1:[BACKEND_PORT]。这样前端代码可以用相对路径/backend_call发起请求，既无需硬编码域名，也能正常访问绑定127.0.0.1的Uvicorn服务。

内容的提问来源于stack exchange，提问作者S. Yong