Nginx反向代理刷新子页面时返回内部地址的问题解决咨询

嗨，我来帮你搞定这个刷新子页面跳转到内部地址的问题～

首先咱们理清楚问题根源：你的React应用是单页应用（SPA），正常导航时是前端路由在处理，所以没问题；但刷新子路由（比如/docs/intro/）时，请求会打到反向代理再转到内部Nginx。这时候内部Nginx在处理try_files规则时，因为拿到的Host信息不对，生成了带internal:3100的重定向，导致浏览器跳转到了内部地址。

下面给你两个可行的解决办法，优先试试第一个，操作起来更简单：

方案一：优化反向代理的Host头传递 #

你的反向代理配置里缺少了Host头的设置，导致内部Nginx不知道用户实际访问的域名是mysite.com，反而用了上游的internal名称生成重定向。只需要在反向代理的location /块里添加一行配置：

修改后的反向代理location配置：

location / {
    proxy_set_header Host $host; # 新增这行，把用户访问的实际域名传给内部Nginx
    proxy_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Server $host;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_pass http://internal;
    proxy_http_version 1.1;
    proxy_redirect off;
}

如果添加后还是有问题，可以把proxy_redirect off替换成下面这行，强制把内部Nginx返回的重定向地址替换成正确的域名：

proxy_redirect http://internal:3100/ https://mysite.com/;

方案二：修改内部容器的Nginx配置 #

如果方案一没解决问题，咱们可以给内部的Nginx配置加上server_name和相关重定向控制，确保它生成的重定向用正确的域名：

修改后的内部Nginx配置：

server {
    listen       ${NGINX_PORT};
    server_name  mysite.com; # 设置成你的实际域名
    port_in_redirect off; # 禁止重定向时带上内部端口3100
    server_name_in_redirect on; # 强制重定向时用配置的server_name
    access_log  /var/log/nginx/access.log  main;

    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html?$args;
    }
}

这样内部Nginx就会明确知道自己的服务域名是mysite.com，生成重定向时就不会用internal这个上游名称了。

一般来说方案一就能解决问题，你可以先尝试这个～

备注：内容来源于stack exchange，提问作者GIJOW