Wrong base URL of frontend API calls

[aommm]

Issue

Hi!

My problem: I'm self-hosting Tandoor at https://my-server.tail1234.ts.net:10000. It's mostly working. I can see the app, it can load images and scripts. However, all API calls fail since they go to http://my-server.tail1234.ts.net:10000 instead of https.

My setup:

• I'm running Tandoor via docker-compose
  • I followed the "Plain" example on the docs site
  • It's running on http://localhost:1337
• I'm exposing it to the internet via Tailscale Funnel
  • sudo tailscale serve https:10000 / http://127.0.0.1:1337
  • This exposes my instance on https://my-server.tail1234.ts.net:10000

Random thoughts:

• Is it possible to configure the base URL of the frontend API calls somehow?
• It seems (some parts of) the app believes it's running under HTTP instead of HTTPS.

If someone has time to look into the above it would be greatly appreciated!

Tandoor Version

d42d784aeb0595bbc0ed47eb8bbc27ba61b0787d

OS Version

Ubuntu 22.04.2

Setup

Docker / Docker-Compose

Reverse Proxy

Others (please state below)

Other

Tailscale

Environment file

# only set this to true when testing/debugging
# when unset: 1 (true) - dont unset this, just for development
DEBUG=1
SQL_DEBUG=0
DEBUG_TOOLBAR=0
# Gunicorn log level for debugging (default value is "info" when unset)
# (see https://docs.gunicorn.org/en/stable/settings.html#loglevel for available settings)
GUNICORN_LOG_LEVEL="debug"

# HTTP port to bind to
# TANDOOR_PORT=8080

# hosts the application can run under e.g. recipes.mydomain.com,cooking.mydomain.com,...
ALLOWED_HOSTS=my-server.tail1234.ts.net,localhost,192.168.1.20,https://my-server.tail1234.ts.net:10000

# Cross Site Request Forgery protection
# (https://docs.djangoproject.com/en/4.2/ref/settings/#std-setting-CSRF_TRUSTED_ORIGINS)
CSRF_TRUSTED_ORIGINS = https://my-server.tail1234.ts.net:10000,https://my-server.tail1234.ts.net
# [https://my-server.tail1234.ts.net, http://my-server.tail1234.ts.net, localhost, http://localhost, http://192.168.1.20:1342, localhost:1342, http://localhost:1342]
# USE_X_FORWARDED_HOST=True

# Cross Origin Resource Sharing
# (https://github.com/adamchainz/django-cors-header)
# CORS_ALLOW_ALL_ORIGINS = True

# random secret key, use for example `base64 /dev/urandom | head -c50` to generate one
# ---------------------------- AT LEAST ONE REQUIRED -------------------------
SECRET_KEY=XXX
SECRET_KEY_FILE=
# ---------------------------------------------------------------

# your default timezone See https://timezonedb.com/time-zones for a list of timezones
TIMEZONE=Europe/Stockholm

# add only a database password if you want to run with the default postgres, otherwise change settings accordingly
DB_ENGINE=django.db.backends.postgresql
# DB_OPTIONS= {} # e.g. {"sslmode":"require"} to enable ssl
POSTGRES_HOST=db_recipes
POSTGRES_PORT=XXX
POSTGRES_USER=XXX
# ---------------------------- AT LEAST ONE REQUIRED -------------------------
POSTGRES_PASSWORD=XXX
POSTGRES_PASSWORD_FILE=
# ---------------------------------------------------------------
POSTGRES_DB=djangodb

# database connection string, when used overrides other database settings.
# format might vary depending on backend
# DATABASE_URL = engine://username:password@host:port/dbname

# the default value for the user preference 'fractions' (enable/disable fraction support)
# default: disabled=0
FRACTION_PREF_DEFAULT=0

# the default value for the user preference 'comments' (enable/disable commenting system)
# default comments enabled=1
COMMENT_PREF_DEFAULT=1

# Users can set a amount of time after which the shopping list is refreshed when they are in viewing mode
# This is the minimum interval users can set. Setting this to low will allow users to refresh very frequently which
# might cause high load on the server. (Technically they can obviously refresh as often as they want with their own scripts)
SHOPPING_MIN_AUTOSYNC_INTERVAL=5

# Default for user setting sticky navbar
# STICKY_NAV_PREF_DEFAULT=1

# If base URL is something other than just / (you are serving a subfolder in your proxy for instance http://recipe_app/recipes/)
# Be sure to not have a trailing slash: e.g. '/recipes' instead of '/recipes/'
#SCRIPT_NAME=https://my-server.tail1234.ts.net:10000

# If staticfiles are stored at a different location uncomment and change accordingly, MUST END IN /
# this is not required if you are just using a subfolder
# This can either be a relative path from the applications base path or the url of an external host
#STATIC_ROOT=/static/
#STATIC_URL=https://my-server.tail1234.ts.net:10000/static/
#STATIC_URL=https://my-server.tail1234.ts.net/tandoor/static/

# If mediafiles are stored at a different location uncomment and change accordingly, MUST END IN /
# this is not required if you are just using a subfolder
# This can either be a relative path from the applications base path or the url of an external host
#MEDIA_URL=/media/

# Serve mediafiles directly using gunicorn. Basically everyone recommends not doing this. Please use any of the examples
# provided that include an additional nxginx container to handle media file serving.
# If you know what you are doing turn this back on (1) to serve media files using djangos serve() method.
# when unset: 1 (true) - this is temporary until an appropriate amount of time has passed for everyone to migrate
GUNICORN_MEDIA=0

# GUNICORN SERVER RELATED SETTINGS (see https://docs.gunicorn.org/en/stable/design.html#how-many-workers for recommended settings)
# GUNICORN_WORKERS=1
# GUNICORN_THREADS=1

# S3 Media settings: store mediafiles in s3 or any compatible storage backend (e.g. minio)
# as long as S3_ACCESS_KEY is not set S3 features are disabled
# S3_ACCESS_KEY=
# S3_SECRET_ACCESS_KEY=
# S3_BUCKET_NAME=
# S3_REGION_NAME= # default none, set your region might be required
# S3_QUERYSTRING_AUTH=1 # default true, set to 0 to serve media from a public bucket without signed urls
# S3_QUERYSTRING_EXPIRE=3600 # number of seconds querystring are valid for
# S3_ENDPOINT_URL= # when using a custom endpoint like minio
# S3_CUSTOM_DOMAIN= # when using a CDN/proxy to S3 (see https://github.com/TandoorRecipes/recipes/issues/1943)

# Email Settings, see https://docs.djangoproject.com/en/3.2/ref/settings/#email-host
# Required for email confirmation and password reset (automatically activates if host is set)
# EMAIL_HOST=
# EMAIL_PORT=
# EMAIL_HOST_USER=
# EMAIL_HOST_PASSWORD=
# EMAIL_USE_TLS=0
# EMAIL_USE_SSL=0
# email sender address (default 'webmaster@localhost')
# DEFAULT_FROM_EMAIL=
# prefix used for account related emails (default "[Tandoor Recipes] ")
# ACCOUNT_EMAIL_SUBJECT_PREFIX=

# allow authentication via the REMOTE-USER header (can be used for e.g. authelia).
# ATTENTION: Leave off if you don't know what you are doing! Enabling this without proper configuration will enable anybody
#   to login with any username!
# See docs for additional information: https://docs.tandoor.dev/features/authentication/#reverse-proxy-authentication
# when unset: 0 (false)
REMOTE_USER_AUTH=0

# Default settings for spaces, apply per space and can be changed in the admin view
# SPACE_DEFAULT_MAX_RECIPES=0 # 0=unlimited recipes
# SPACE_DEFAULT_MAX_USERS=0 # 0=unlimited users per space
# SPACE_DEFAULT_MAX_FILES=0 # Maximum file storage for space in MB. 0 for unlimited, -1 to disable file upload.
# SPACE_DEFAULT_ALLOW_SHARING=1 # Allow users to share recipes with public links

# allow people to create local accounts on your application instance (without an invite link)
# social accounts will always be able to sign up
# when unset: 0 (false)
# ENABLE_SIGNUP=0

# If signup is enabled you might want to add a captcha to it to prevent spam
# HCAPTCHA_SITEKEY=
# HCAPTCHA_SECRET=

# if signup is enabled you might want to provide urls to data protection policies or terms and conditions
# TERMS_URL=
# PRIVACY_URL=
# IMPRINT_URL=

# enable serving of prometheus metrics under the /metrics path
# ATTENTION: view is not secured (as per the prometheus default way) so make sure to secure it
# trough your web server (or leave it open of you dont care if the stats are exposed)
# ENABLE_METRICS=0

# allows you to setup OAuth providers
# see docs for more information https://docs.tandoor.dev/features/authentication/
# SOCIAL_PROVIDERS = allauth.socialaccount.providers.github, allauth.socialaccount.providers.nextcloud,

# Should a newly created user from a social provider get assigned to the default space and given permission by default ?
# ATTENTION: This feature might be deprecated in favor of a space join and public viewing system in the future
# default 0 (false), when 1 (true) users will be assigned space and group
# SOCIAL_DEFAULT_ACCESS = 1

# if SOCIAL_DEFAULT_ACCESS is used, which group should be added
# SOCIAL_DEFAULT_GROUP=guest

# Django session cookie settings. Can be changed to allow a single django application to authenticate several applications
# when running under the same database
# SESSION_COOKIE_DOMAIN=.example.com
# SESSION_COOKIE_NAME=sessionid # use this only to not interfere with non unified django applications under the same top level domain

# by default SORT_TREE_BY_NAME is disabled this will store all Keywords and Food in the order they are created
# enabling this setting makes saving new keywords and foods very slow, which doesn't matter in most usecases.
# however, when doing large imports of recipes that will create new objects, can increase total run time by 10-15x
# Keywords and Food can be manually sorted by name in Admin
# This value can also be temporarily changed in Admin, it will revert the next time the application is started
# This will be fixed/changed in the future by changing the implementation or finding a better workaround for sorting
# SORT_TREE_BY_NAME=0
# LDAP authentication
# default 0 (false), when 1 (true) list of allowed users will be fetched from LDAP server
#LDAP_AUTH=
#AUTH_LDAP_SERVER_URI=
#AUTH_LDAP_BIND_DN=
#AUTH_LDAP_BIND_PASSWORD=
#AUTH_LDAP_USER_SEARCH_BASE_DN=
#AUTH_LDAP_TLS_CACERTFILE=
#AUTH_LDAP_START_TLS=

# Enables exporting PDF (see export docs)
# Disabled by default, uncomment to enable
# ENABLE_PDF_EXPORT=1

# Recipe exports are cached for a certain time by default, adjust time if needed
# EXPORT_FILE_CACHE_DURATION=600

Docker-Compose file

version: '3'
services:
 db_recipes:
   restart: always
   image: postgres:15-alpine
   volumes:
     - ./tandoor/postgresql:/var/lib/postgresql/data
   # Downloaded through `wget https://raw.githubusercontent.com/vabene1111/recipes/develop/.env.template -O .env`
   env_file: 
     - ./tandoor/.env

 web_recipes:
   restart: always
   image: vabene1111/recipes
   env_file:
     - ./tandoor/.env
   volumes:
     - tandoor_staticfiles:/opt/recipes/staticfiles
     # NOTE: I copied the config contents from the docker image into ./tandoor/nginx-config/
     - ./tandoor/nginx-config/:/opt/recipes/nginx/conf.d
     - ./mediafiles:/opt/recipes/mediafiles
   depends_on:
     - db_recipes

 nginx_recipes:
   image: nginx:mainline-alpine
   restart: always
   ports:
     - 1342:80
   env_file:
     - ./tandoor/.env
   depends_on:
     - web_recipes
   volumes:
     # NOTE: I copied the config contents from the docker image into ./tandoor/nginx-config/
     - ./tandoor/nginx-config/:/etc/nginx/conf.d:ro
     - tandoor_staticfiles:/static:ro
     - ./mediafiles:/media:ro

volumes:
  tandoor_staticfiles:

Relevant logs

No response

[smilerz]

You need to set X-Forwarded-Porton your reverse proxy

[aommm]

Thanks a lot, I got it working now! (Technically it was X-Forwarded-Proto I needed to set).

Turns out that my Tailscale binary was a few months old. If I upgrade to Tailscale 1.44 it works (Tailscale PR that fixes this).