反向代理因为html中绝对路径导致超链接失效

反向代理因为html中绝对路径导致超链接失效

评论

评论 1 - wuxinyumrx

更新一下解决方案，nginx反向代理配置如下（需要nginx包含http_sub_module）：

        proxy_http_version 1.1;
        proxy_pass http://xx.xx.xx.xx:58090/;
        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;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
        proxy_set_header Accept-Encoding "";
        sub_filter_types *;
        sub_filter_once off;
        sub_filter '/ws/' '/xm/ws/';
        sub_filter '/static/' '/xm/static/';
        sub_filter '/musiclist' '/xm/musiclist';
        sub_filter '/musicinfo' '/xm/musicinfo';
        sub_filter '/curplaylist' '/xm/curplaylist';
        sub_filter '/generate_ws_token' '/xm/generate_ws_token';
        sub_filter '/getversion' '/xm/getversion';
        sub_filter '/getsetting' '/xm/getsetting';
        sub_filter '/getvolume' '/xm/getvolume';
        sub_filter '/setvolume' '/xm/setvolume';
        sub_filter '/playingmusic' '/xm/playingmusic';
        sub_filter '/searchmusic' '/xm/searchmusic';
        sub_filter '/latestversion' '/xm/latestversion';
        sub_filter '/cmd' '/xm/cmd';
        sub_filter '"musiclist' '"xm/musiclist';
        sub_filter '"musicinfo' '"xm/musicinfo';
        sub_filter '"curplaylist' '"xm/curplaylist';
        sub_filter '"generate_ws_token' '"xm/generate_ws_token';
        sub_filter '"getversion' '"xm/getversion';
        sub_filter '"getsetting' '"xm/getsetting';
        sub_filter '"getvolume' '"xm/getvolume';
        sub_filter '"setvolume' '"xm/setvolume';
        sub_filter '"playingmusic' '"xm/playingmusic';
        sub_filter '"searchmusic' '"xm/searchmusic';
        sub_filter '"latestversion' '"xm/latestversion';
        sub_filter '"cmd' '"xm/cmd';
        sub_filter '/manifest.json' '/xm/manifest.json';
        sub_filter '"start_url": "/"' '"start_url": "/xm/"';
        sub_filter '"scope": "/"' '"scope": "/xm/"';

---

评论 2 - wooodxi

首先感谢各位大佬辛苦的付出。 我是家庭使用的威联通NAS部署的xiaomusic,NAS上也是使用的docker部署的是frpc客户端（nas上填写对应的端口号），在云服务使用docker部署的frps服务端（填写二级ssl域名）这样的反向代理，部署好以后外网通过链接https:xxx.xxx.xx是可以访问xiaomusic，播放歌曲音箱却没有声音，但是你们的测试播放连接是可以播放音乐， 包括点击停止播放音箱也是可以回应听到音箱发出再见收到的声音，就是播放歌曲音箱不出声。希望可以得到解答。 谢谢大佬

---

评论 3 - hanxi

@wooodxi 需要改设置页面的ip和端口。

---

评论 4 - 13267740993

nginx 502 要关闭浏览器再打开才行 帮忙看下啥原因 server { listen 80; server_name www.music.cn;

# ================================
# 根路径：原始反向代理（不做路径替换）
# ================================
location / {

    # 反向代理到本机 58090 服务
    proxy_pass http://127.0.0.1:58090;

    # 使用 HTTP/1.1，避免 keep-alive / chunked 问题
    proxy_http_version 1.1;

    # 清空 Connection 头，交由 Nginx 自动管理
    proxy_set_header Connection "";

    # 转发客户端真实信息
    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;

    # 连接 / 读取 / 发送超时设置，防止 502
    proxy_connect_timeout 60s;
    proxy_send_timeout    60s;
    proxy_read_timeout    60s;
    send_timeout          60s;

    # 上传文件大小限制
    client_max_body_size 100m;
}

# =================================================
# /xm/ 路径：子路径部署（带 WebSocket + sub_filter）
# =================================================
location /xm/ {

    # 反向代理到后端服务根路径
    proxy_pass http://127.0.0.1:58090/;

    # 使用 HTTP/1.1（WebSocket 必须）
    proxy_http_version 1.1;

    # WebSocket 升级头
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";

    # 转发客户端信息
    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;

    # 禁用 gzip，否则 sub_filter 无法生效
    proxy_set_header Accept-Encoding "";

    # ========== sub_filter 内容替换 ==========
    # 对所有响应类型生效（HTML / JS / JSON）
    sub_filter_types *;

    # 页面中出现多次也全部替换
    sub_filter_once off;

    # 接口路径统一加 /xm 前缀
    sub_filter '"/' '"/xm/';
    sub_filter "'/" "'/xm/";

    # WebSocket 路径修正
    sub_filter '/ws/' '/xm/ws/';

    # 静态资源路径修正
    sub_filter '/static/' '/xm/static/';

    # PWA / manifest 相关路径修正
    sub_filter '/manifest.json' '/xm/manifest.json';
    sub_filter '"start_url": "/"' '"start_url": "/xm/"';
    sub_filter '"scope": "/"' '"scope": "/xm/"';

    # ========== CORS 跨域配置 ==========
    add_header Access-Control-Allow-Origin $http_origin always;
    add_header Access-Control-Allow-Credentials true always;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS' always;
    add_header Access-Control-Allow-Headers
        'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization'
        always;

    # OPTIONS 预检请求直接返回
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 超时配置
    proxy_connect_timeout 60s;
    proxy_send_timeout    60s;
    proxy_read_timeout    60s;
    send_timeout          60s;

    # 上传大小限制
    client_max_body_size 100m;
}

# ================================
# 502 错误页
# ================================
error_page 502 /502.html;

}

---

评论 5 - hanxi

我也不熟 nginx 配置，建议使用 https://github.com/jc21/nginx-proxy-manager 配置 proxy ，简单的 GUI 操作就行。

---

链接到 GitHub Issue