配置SSL后Nginx部署React前端与Node后端同服务器请求异常解决方案咨询

嘿，我之前也碰到过几乎一模一样的状况，咱们一步步来搞定它：

问题根源 #

• 你的Node后端跑在4000端口，根本没配置SSL证书，所以直接用https://[IP]:4000访问肯定会触发ERR_SSL_PROTOCOL_ERROR——后端压根没在处理HTTPS请求啊。
• 当前端通过HTTPS加载时，发起HTTP请求到后端就会触发混合内容错误，浏览器会直接阻止这种不安全的跨协议请求。

最优解决方案：用Nginx做反向代理 #

最稳妥的方式是让Nginx作为统一入口，处理所有HTTPS请求，再把后端API请求悄悄转发到本地的4000端口（既不用暴露后端端口，也彻底避免了跨协议问题）。

1. 修改React前端的环境变量

把.env里的REACT_APP_BASE_URL改成相对路径：

REACT_APP_BASE_URL=/api

这样前端所有API请求都会自动沿用当前页面的协议（HTTPS）和域名，比如https://mysite.com.br/api/xxx。

然后重新构建React项目，把静态文件部署到Nginx目录：

npm run build
# 把build目录下的所有文件替换到/var/www/html里
sudo cp -r build/* /var/www/html/

2. 更新Nginx配置

把你注释掉的SSL配置恢复，同时添加反向代理的规则。最终的配置大概是这样：

server {
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/mysite.com.br/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/mysite.com.br/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    server_name mysite.com.br;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    # 处理前端静态文件和路由
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 反向代理到Node后端的4000端口
    location /api {
        # 去掉/api前缀后转发给后端
        rewrite ^/api/(.*)$ /$1 break;
        proxy_pass http://localhost:4000;
        # 传递必要的请求头给后端
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

# 把所有HTTP请求强制重定向到HTTPS
server {
    listen 80;
    listen [::]:80;
    server_name mysite.com.br;
    return 301 https://$host$request_uri;
}

3. 重启服务生效

# 先测试Nginx配置是否合法
sudo nginx -t
# 没问题就重启Nginx
sudo systemctl restart nginx
# 确保Node后端正常运行（如果需要的话）
pm2 restart <你的后端进程名称>

额外提醒 #

• 记得开放服务器防火墙的443端口（比如用ufw allow 443）。
• 确认Certbot生成的证书路径正确，域名解析已经指向你的服务器IP。
• 如果你的后端API前缀不是/api，可以调整Nginx里的location和rewrite规则，匹配实际的API路径就行。

这么配置完之后，前端通过HTTPS访问，API请求也会通过Nginx安全转发到后端，两个问题都能一次性解决！

内容的提问来源于stack exchange，提问作者andgmartins