WEB经TCP/IP端口映射后,手机安卓端加载界面异常 #5389

Closed
opened 2026-02-05 10:01:46 +03:00 by OVERLORD · 7 comments
Owner

Originally created by @Sambaaaaaaa on GitHub (Aug 4, 2025).

Describe the Bug

WEB经TCP/IP端口映射后,手机安卓端加载界面异常

Steps to Reproduce

bookstack server ip:10.21.108.254 port:8080
netsh interface portproxy add v4tov4 listenport=8080 connectaddress=10.21.108.254 connectport=8080

Expected Behaviour

请看一下这个什么原因导致,如何解决?

Screenshots or Additional Context

Image

Image

Browser Details

No response

Exact BookStack Version

25.07

Originally created by @Sambaaaaaaa on GitHub (Aug 4, 2025). ### Describe the Bug WEB经TCP/IP端口映射后,手机安卓端加载界面异常 ### Steps to Reproduce bookstack server ip:10.21.108.254 port:8080 netsh interface portproxy add v4tov4 listenport=8080 connectaddress=10.21.108.254 connectport=8080 ### Expected Behaviour 请看一下这个什么原因导致,如何解决? ### Screenshots or Additional Context ![Image](https://github.com/user-attachments/assets/0ac8a27c-8431-4e08-8fc1-4294f73d9498) <img width="1914" height="913" alt="Image" src="https://github.com/user-attachments/assets/44f434e3-fcf2-44c5-8374-f86e4c0ca6cf" /> ### Browser Details _No response_ ### Exact BookStack Version 25.07
OVERLORD added the 🐕 Support label 2026-02-05 10:01:46 +03:00
Author
Owner

@Sambaaaaaaa commented on GitHub (Aug 4, 2025):

TCP/IP端口映射后的web,PC端打开是正常的,但是安卓端加载打开就异常了。

@Sambaaaaaaa commented on GitHub (Aug 4, 2025): TCP/IP端口映射后的web,PC端打开是正常的,但是安卓端加载打开就异常了。
Author
Owner

@ssddanbrown commented on GitHub (Aug 4, 2025):

Hi @Sambaaaaaaa,
When accessing via Android, are you also accessing using the same port number and protocol (http:///https:// part)?

What is your APP_URL env option set to?

@ssddanbrown commented on GitHub (Aug 4, 2025): Hi @Sambaaaaaaa, When accessing via Android, are you also accessing using the same port number and protocol (`http://`/`https://` part)? What is your `APP_URL` env option set to?
Author
Owner

@Sambaaaaaaa commented on GitHub (Aug 5, 2025):

@ssddanbrown 你好, 感谢你的回信!

一、/home/bookstack_data/www/.env   Config:

APP_KEY=base64:3POTE674n/W9vSrwhzXf0A4Z5Xtw5FHRPWhtbKzJaxk=

APP_URL=http://10.21.108.254:8080/

APP_UPLOAD_LIMIT=4096

FILE_UPLOAD_SIZE_LIMIT=4096

DB_HOST=bookstack_db

DB_DATABASE=bookstack

DB_USERNAME=bookstackuser

DB_PASSWORD=bookstackpass

二、docker-compose  Config:

Details

version: '3.8'

services:
  mariadb:
    image: mariadb:10.6
    container_name: bookstack_db
    restart: always
    environment:
      MARIADB_ROOT_PASSWORD: rootpassword
      MARIADB_DATABASE: bookstack
      MARIADB_USER: bookstackuser
      MARIADB_PASSWORD: bookstackpass
    volumes:
      - /home/mariadb_data:/var/lib/mysql
    networks:
      - bookstacknet
    healthcheck:
      test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]
      interval: 10s
      timeout: 5s
      retries: 5
      start_period: 30s

  bookstack:
    image: ghcr.io/linuxserver/bookstack:25.07.20250730
    container_name: bookstack_app
    restart: always
    depends_on:
      mariadb:
        condition: service_healthy
    environment:
      PUID: 1000
      PGID: 1000
      APP_URL: http://10.21.108.254:8080
      APP_KEY: "base64:3POTE674n/W9vSrwhzXf0A4Z5Xtw5FHRPWhtbKzJaxk="
      DB_HOST: bookstack_db
      DB_PORT: 3306
      DB_USERNAME: bookstackuser
      DB_PASSWORD: bookstackpass
      DB_DATABASE: bookstack
    ports:
      - "8080:80"
    volumes:
      - /home/bookstack_data:/config
      - /home/bookstack_data/php/php-local.ini:/usr/local/etc/php/conf.d/custom.ini:ro
    networks:
      - bookstacknet

networks:
  bookstacknet:
    name: bookstacknet
    driver: bridge

三、我使用了多台设备,以及尝试其他TCP/IP端口映射,测试结果都是一,以下是我截图

访问相同的协议地址:http://10.21.98.62:8080

3.1 安卓设备1   (MI 15,B ver:Chrome 131.0.6778.260,Android:15)

Image

3.2 安卓设备2   (Samsung Note10,B ver:Chrome 138.0.7204.63,Android:12)

Image

Image

@Sambaaaaaaa commented on GitHub (Aug 5, 2025): @ssddanbrown 你好, 感谢你的回信! 一、/home/bookstack_data/www/.env   Config: APP_KEY=base64:3POTE674n/W9vSrwhzXf0A4Z5Xtw5FHRPWhtbKzJaxk= APP_URL=http://10.21.108.254:8080/ APP_UPLOAD_LIMIT=4096 FILE_UPLOAD_SIZE_LIMIT=4096 DB_HOST=bookstack_db DB_DATABASE=bookstack DB_USERNAME=bookstackuser DB_PASSWORD=bookstackpass 二、docker-compose  Config: <details><summary>Details</summary> <p> ```yaml version: '3.8' services:   mariadb:     image: mariadb:10.6     container_name: bookstack_db     restart: always     environment:       MARIADB_ROOT_PASSWORD: rootpassword       MARIADB_DATABASE: bookstack       MARIADB_USER: bookstackuser       MARIADB_PASSWORD: bookstackpass     volumes:       - /home/mariadb_data:/var/lib/mysql     networks:       - bookstacknet     healthcheck:       test: ["CMD", "mysqladmin", "ping", "-h", "localhost"]       interval: 10s       timeout: 5s       retries: 5       start_period: 30s   bookstack:     image: ghcr.io/linuxserver/bookstack:25.07.20250730     container_name: bookstack_app     restart: always     depends_on:       mariadb:         condition: service_healthy     environment:       PUID: 1000       PGID: 1000       APP_URL: http://10.21.108.254:8080       APP_KEY: "base64:3POTE674n/W9vSrwhzXf0A4Z5Xtw5FHRPWhtbKzJaxk="       DB_HOST: bookstack_db       DB_PORT: 3306       DB_USERNAME: bookstackuser       DB_PASSWORD: bookstackpass       DB_DATABASE: bookstack     ports:       - "8080:80"     volumes:       - /home/bookstack_data:/config       - /home/bookstack_data/php/php-local.ini:/usr/local/etc/php/conf.d/custom.ini:ro     networks:       - bookstacknet networks:   bookstacknet:     name: bookstacknet     driver: bridge ``` </p> </details> 三、我使用了多台设备,以及尝试其他TCP/IP端口映射,测试结果都是一,以下是我截图 访问相同的协议地址:http://10.21.98.62:8080 3.1 安卓设备1   (MI 15,B ver:Chrome 131.0.6778.260,Android:15) ![Image](https://github.com/user-attachments/assets/11c029d0-9b3a-4083-ac42-c8fc5a27bb69) 3.2 安卓设备2   (Samsung Note10,B ver:Chrome 138.0.7204.63,Android:12) ![Image](https://github.com/user-attachments/assets/f75847bc-5c9c-4cba-89d2-427ea5c8fd5e) ![Image](https://github.com/user-attachments/assets/cba583d6-b825-4cfc-9971-4ef636429a5c)
Author
Owner

@ssddanbrown commented on GitHub (Aug 5, 2025):

Hi @Sambaaaaaaa,

I noticed you have APP_URL: http://10.21.108.254:8080 set (in both the compose config and the .env file) while you are accessing via http://10.21.98.62:8080. This mismatch would cause the issues you're seeing.

Can you update any APP_URL references to match the URL you're using the access via the mobile browser? (So http://10.21.98.62:8080).
Remember to re-up the container, as just restarting may not take into account any env option changes.

@ssddanbrown commented on GitHub (Aug 5, 2025): Hi @Sambaaaaaaa, I noticed you have `APP_URL: http://10.21.108.254:8080` set (in both the compose config and the .env file) while you are accessing via `http://10.21.98.62:8080`. This mismatch would cause the issues you're seeing. Can you update any `APP_URL` references to match the URL you're using the access via the mobile browser? (So `http://10.21.98.62:8080`). Remember to re-up the container, as just restarting may not take into account any env option changes.
Author
Owner

@Sambaaaaaaa commented on GitHub (Aug 6, 2025):

@ssddanbrown 你好,感谢您的指引,我成功解决了问题!我更新了 APP_URL 并且 重新删除再创建容器后,确实可以正常的显示了。

@Sambaaaaaaa commented on GitHub (Aug 6, 2025): @ssddanbrown 你好,感谢您的指引,我成功解决了问题!我更新了 APP_URL 并且 重新删除再创建容器后,确实可以正常的显示了。
Author
Owner

@Sambaaaaaaa commented on GitHub (Aug 6, 2025):

最后再问两个问题;①疑惑的是为什么 Windows PC端不会受此影响,不需要更正 APP_URL, 也可以正常浏览访问。②该项目以后是否会考虑推出移动手机客户端,希望以安装客户端的方式,实现与Windows PC端一样,不受 APP_URL 影响,也可以正常浏览访问。

@Sambaaaaaaa commented on GitHub (Aug 6, 2025): 最后再问两个问题;①疑惑的是为什么 Windows PC端不会受此影响,不需要更正 APP_URL, 也可以正常浏览访问。②该项目以后是否会考虑推出移动手机客户端,希望以安装客户端的方式,实现与Windows PC端一样,不受 APP_URL 影响,也可以正常浏览访问。
Author
Owner

@ssddanbrown commented on GitHub (Aug 6, 2025):

Good to hear that helped resolve things!

I'm not sure why the PC version was working. It could depend on which actual settings were in use at the time, and which URL was used. Hard to be sure.

I am not looking to develop a native application any time soon, it would be a lot of extra effort for limited benefit compared to just ensuring the web interface works well on mobile devices.

Since this was resolved, I'll therefore go ahead and close off this issue.

@ssddanbrown commented on GitHub (Aug 6, 2025): Good to hear that helped resolve things! I'm not sure why the PC version was working. It could depend on which actual settings were in use at the time, and which URL was used. Hard to be sure. I am not looking to develop a native application any time soon, it would be a lot of extra effort for limited benefit compared to just ensuring the web interface works well on mobile devices. Since this was resolved, I'll therefore go ahead and close off this issue.
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: starred/BookStack#5389