nginx ssl + react + node，响应超时答案

【问题标题】：nginx ssl + react + node, response is timeoutnginx ssl + react + node，响应超时
【发布时间】：2021-09-20 20:26:43
【问题描述】：

我制作了一个 react 应用程序，它适用于 http 协议。现在我想为这个站点启用 https。我的节点正在侦听端口 5000 并在端口 3000 上做出反应。但是我无法将命令发送到节点正在侦听的端口 5000 并且出现超时错误。这是我在启用站点的文件夹中的 nginx 默认配置文件。

# Default server configuration
server {
    listen 80 default_server;
    listen [::]:80 default_server;
    
    # SSL configuration
    listen 443 ssl ;
    listen [::]:443 ssl ;

    root /var/www/html/client/public;
    index index.html index.htm index.nginx-debian.html;
    server_name www.my_domain.co my_domain.co; # managed by Certbot

    location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
            add_header 'Access-Control-Max-Age' 1728000;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }
        if ($request_method = 'POST') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }
        if ($request_method = 'GET') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }       
        proxy_pass http://localhost:3000;
    }
    
    location /uploads {
        proxy_pass http://localhost:5000;
    }
    location /api {
        proxy_pass http://localhost:5000;
    }
    
    ssl_certificate /etc/letsencrypt/live/my_domain.co/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my_domain.co/privkey.pem; # managed by Certbot
}

有什么问题？我很困惑。

【问题讨论】：

缺少一些代理标头来维护从您的 reactapp 到后端服务器的相同会话，这可能会有所帮助stackoverflow.com/a/44425690/4257943
谢谢@Orecinco，但我仍然收到超时错误
我不清楚你在做什么。您显示了一个 nginx 配置，它侦听端口 80 和 443，而不是端口 5000。而是将请求转发到 localhost 端口 3000 和 5000。目前尚不清楚您到底在尝试什么，从哪个系统以及从哪里得到错误。但是例如 https://my_domain.co:5000 这样的东西不应该根据您的配置工作。
@SteffenUllrich ，是的，这正是我想要实现的。 React 应用程序在端口 5000 上与后端节点通信......我该如何实现？
再次，不清楚您在做什么。 " 但我无法向节点正在侦听的端口 5000 发送命令，并且出现超时错误。" - 从哪里发送命令？去哪里？您究竟如何发送这些命令，即工具、确切的 URL。您收到的确切错误消息是什么？

标签： reactjs ssl nginx-config

【解决方案1】：

对于那些遇到类似问题的人。我发现我无法通过 https 将请求发送到某个特定端口（我的是端口 5000），而是使用 nginx proxy-pass 将 /api 的请求发送到 localhost:5000 ，现在我可以正常工作了.

【讨论】：