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

# 反向代理因为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](https://github.com/hanxi/xiaomusic/issues/533)