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

[Sambaaaaaaa]

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

Browser Details

No response

Exact BookStack Version

25.07

[Sambaaaaaaa]

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

[ssddanbrown]

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?

[Sambaaaaaaa]

@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)

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

[ssddanbrown]

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.

[Sambaaaaaaa]

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

[Sambaaaaaaa]

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

[ssddanbrown]

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.