React 和 nginx：拒绝连接到本地主机

Question

我的 React（前端）和 Django REST（后端）在带有 nginx 的远程 Ubuntu 服务器上运行。我还在

conf.d/bookmarks.conf

中定义了一个简单的反向代理来管理所有这些：

server {
    listen 80;
    listen [::]:80;

    location /api/ {    # Backend
        proxy_pass http://127.0.0.1:1337/api/;

    }

    location / {    # Frontend
        root        /var/www/bookmarks/html/;
        index       index.html;
        try_files   $uri $uri/ /index.html;
    } 
}

我用

runserver python manage.py runserver 127.0.0.1:1337

运行我的 Django 应用程序，React 静态文件存储在上述文件夹中

我尝试使用 React 连接到 API：

const generateOpendIdLink = async () => {
      const generateOpendIdLinkEndpoint = 'http://127.0.0.1/api/opendid-link-generator/';
      const requestOptions = {
        method: 'GET',
        headers: {'Content-Type': 'application/json'},
      };

      try {
        const response = await fetch(generateOpendIdLinkEndpoint, requestOptions);
        if (response.status == 200) {
          ...
        };
      } catch (error) {
        console.log(error);
      };
    };

并得到一个错误

GET http://127.0.0.1/api/opendid-link-generator/ net::ERR_CONNECTION_REFUSED

这很奇怪，因为我可以毫无问题地从 Web 连接到 API：在 Postman 的服务器 IP 地址

http://XX.XXX.XX.XX/api/opendid-link-generator/

上运行相同的 GET 按预期工作。当我在 React 代码中将服务器 IP 更改为 127.0.0.1 时也是如此，一切都开始工作了。

在尝试解决此问题时，我还设置了

ALLOWED_HOSTS = ['*']

以进行测试，但没有帮助。有谁知道问题的根源是什么？

Answer 1

我对 javascript 一无所知，但让我试一试：

const generateOpendIdLinkEndpoint = 'http://127.0.0.1/api/opendid-link-generator/';

这个定义不包括端口！很可能它会在

:80

处查找默认的 http 端口。尝试包括端口并让我知道！

Answer 2

JS 代码在客户端设备上执行，因此不会与 Django 应用共享

localhost

。这就是为什么您需要指定服务器的 IP 地址。