Q&A

[RR-Helpdesk]

shlink-web-client version

Shlink 3.6.4

How do you use shlink-web-client

Other (explain in summary)

Summary

How do you use shlink-web-client
I've tried both self hosted and https://app.shilink.io

Nginx nginx version: nginx/1.25.3

This seems an impossible situation :) I've been trying to get Shlink working for months and cannot figure out how. It would if could be more specific on your instructions. I believe my problem is the Core Headers, but I'm entirely because isn't allot debug options available from the Shlink side.

Note, I've tried the OpenSwoole open with reverse proxy but the example are serving it straight from a a web server, Nginx.

The initial attempt included the conf below which mirror you site but anytime you access the client your immediate kickoff to this:

-------- error ----------------
Oops! This is awkward :S
It seems that something went wrong. Try refreshing the page or just click this button.
-------- error ----------------

Config:

---------- shlink.conf -----------

server {
    if ($host = rrebel.link) {
        return 301 https://$host$request_uri;
    }

    listen 80;
    #    listen [::]:80;

    server_name rrebel.link www.rrebel.link;
    return 301 https://$host$request_uri;


}

server {
    listen 443 ssl;
    #   listen  [::]:443 ssl;
    http2 on;
    root /var/www/shlink/public;
    index index.php;
    charset utf-8;

    ssl_certificate /etc/letsencrypt/live/rrebel.link-0001/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/rrebel.link-0001/privkey.pem; 

    access_log /var/log/nginx/domains/shilink.log combined;
    error_log /var/log/nginx/domains/shilink.error.log error;

    server_name rrebel.link www.rrebel.link;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ { 
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }
}

---------- end shlink.conf -----------

Produces this error:

---------- google dev console log -----------

index-5c19fb17.js:57 TypeError: Failed to construct 'URL': Invalid URL
at index-5c19fb17.js:902:2581
at Array.map ()
at Bpe (index-5c19fb17.js:902:2565)
at index-5c19fb17.js:902:2965
at _y (index-5c19fb17.js:57:24283)
at lc (index-5c19fb17.js:57:42406)
at LH (index-5c19fb17.js:57:41228)
at Sa (index-5c19fb17.js:57:40275)
at Ok (index-5c19fb17.js:57:36885)
at Ks (index-5c19fb17.js:55:3279)
at index-5c19fb17.js:57:34263
Fb @ index-5c19fb17.js:57
o.componentDidCatch.n.callback @ index-5c19fb17.js:57
ak @ index-5c19fb17.js:55
Ck @ index-5c19fb17.js:57
C4 @ index-5c19fb17.js:57
PH @ index-5c19fb17.js:57
LH @ index-5c19fb17.js:57
Sa @ index-5c19fb17.js:57
Ok @ index-5c19fb17.js:57
Ks @ index-5c19fb17.js:55
(anonymous) @ index-5c19fb17.js:57
index-5c19fb17.js:892 TypeError: Failed to construct 'URL': Invalid URL
at index-5c19fb17.js:902:2581
at Array.map ()
at Bpe (index-5c19fb17.js:902:2565)
at index-5c19fb17.js:902:2965
at _y (index-5c19fb17.js:57:24283)
at lc (index-5c19fb17.js:57:42406)
at LH (index-5c19fb17.js:57:41228)
at Sa (index-5c19fb17.js:57:40275)
at Ok (index-5c19fb17.js:57:36885)
at Ks (index-5c19fb17.js:55:3279)
at index-5c19fb17.js:57:34263
componentDidCatch @ index-5c19fb17.js:892
o.componentDidCatch.n.callback @ index-5c19fb17.js:57
ak @ index-5c19fb17.js:55
Ck @ index-5c19fb17.js:57
C4 @ index-5c19fb17.js:57
PH @ index-5c19fb17.js:57
LH @ index-5c19fb17.js:57
Sa @ index-5c19fb17.js:57
Ok @ index-5c19fb17.js:57
Ks @ index-5c19fb17.js:55
(anonymous) @ index-5c19fb17.js:57

index-5c19fb17.js:57 TypeError: Failed to construct 'URL': Invalid URL
at index-5c19fb17.js:902:2581
at Array.map ()
at Bpe (index-5c19fb17.js:902:2565)
at index-5c19fb17.js:902:2965
at _y (index-5c19fb17.js:57:24283)
at lc (index-5c19fb17.js:57:42406)
at LH (index-5c19fb17.js:57:41228)
at Sa (index-5c19fb17.js:57:40275)
at Ok (index-5c19fb17.js:57:36885)
at Ks (index-5c19fb17.js:55:3279)
at index-5c19fb17.js:57:34263
Fb @ index-5c19fb17.js:57
o.componentDidCatch.n.callback @ index-5c19fb17.js:57
ak @ index-5c19fb17.js:55
Ck @ index-5c19fb17.js:57
C4 @ index-5c19fb17.js:57
PH @ index-5c19fb17.js:57
LH @ index-5c19fb17.js:57
Sa @ index-5c19fb17.js:57
Ok @ index-5c19fb17.js:57
Ks @ index-5c19fb17.js:55
(anonymous) @ index-5c19fb17.js:57
index-5c19fb17.js:892 TypeError: Failed to construct 'URL': Invalid URL
at index-5c19fb17.js:902:2581
at Array.map ()
at Bpe (index-5c19fb17.js:902:2565)
at index-5c19fb17.js:902:2965
at _y (index-5c19fb17.js:57:24283)
at lc (index-5c19fb17.js:57:42406)
at LH (index-5c19fb17.js:57:41228)
at Sa (index-5c19fb17.js:57:40275)
at Ok (index-5c19fb17.js:57:36885)
at Ks (index-5c19fb17.js:55:3279)
at index-5c19fb17.js:57:34263
componentDidCatch @ index-5c19fb17.js:892
o.componentDidCatch.n.callback @ index-5c19fb17.js:57
ak @ index-5c19fb17.js:55
Ck @ index-5c19fb17.js:57
C4 @ index-5c19fb17.js:57
PH @ index-5c19fb17.js:57
LH @ index-5c19fb17.js:57
Sa @ index-5c19fb17.js:57
Ok @ index-5c19fb17.js:57
Ks @ index-5c19fb17.js:55
(anonymous) @ index-5c19fb17.js:57

---------- end google dev console log -----------

Next I tried open add Core Config by adding this in the location block

------------ revised shlink.conf --------------

    location ~ \.php$ {
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass unix:/run/php/php8.2-fpm.sock;
        fastcgi_index index.php;
        include fastcgi_params;
        include /etc/nginx/snippets/cors-headers.conf;    <<----------------CHANGE
    }

------------ revised shlink.conf --------------

Which includes:

-------- cors-headers.conf ----------------

set $cors '';

if ($http_origin ~ '^https?://(localhost|www\.rrebel\.link|www\.rrebel\.link|www\dashboard.rrebel\.link|www\dashboard.rrebel\.link)') {
	set $cors 'true';
}

if ($cors = 'true') {
	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, PUT, DELETE, OPTIONS' always;
	add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Requested-With' always;
	# required to be able to read Authorization header in frontend
	#add_header 'Access-Control-Expose-Headers' 'Authorization' always;
}

if ($request_method = 'OPTIONS') {
	# Tell client that this pre-flight info is valid for 20 days
	add_header 'Access-Control-Max-Age' 1728000;
	add_header 'Content-Type' 'text/plain charset=UTF-8';
	add_header 'Content-Length' 0;
	return 204;
}

-------- cors-headers.conf ----------------

Trying a few different cars configs, including this results in not being able to find Shlink

-------- error ----------------

"Oops! Could not connect to this Shlink server.
Make sure you have internet connection, and the server is properly configured and on-line."

-------- error ----------------

even thought I still render shorts and health check comes back ok

--------- heath check -------------

curl https://rrebel.link/rest/health ] 10:19 PM
{"status":"pass","version":"3.6.4","links":{"about":"https://shlink.io","project":"https://github.com/shlinkio/shlink"}}#

-------- end heath check ---------

This is the code open config I tested

-----other cors header config -----------

location / {
     if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        #
        # Custom headers and headers various browsers *should* be OK with but aren't
        #
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        #
        # Tell client that this pre-flight info is valid for 20 days
        #
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
     }
     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
     }
     if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range' always;
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range' always;
     }
}

-----other cors header config -----------

------ nginx.conf -------

user www-data;
worker_processes auto;
worker_rlimit_nofile 65535;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
	worker_connections 768;
	use epoll;
	multi_accept on;
	# multi_accept on;
}

http {

	##
	# Basic Settings
	##

	sendfile on;
	tcp_nopush on;
	tcp_nodelay on;
	charset utf-8;
	client_header_timeout 180s;
	client_body_timeout 180s;
	client_header_buffer_size 2k;
	client_body_buffer_size 256k;
	client_max_body_size 256m;
	keepalive_timeout 30s;
	keepalive_requests 100000;
	large_client_header_buffers 4 8k;
	reset_timedout_connection on;
	send_timeout 60s;
	server_tokens off;
	server_name_in_redirect off;
	server_names_hash_max_size 512;
	server_names_hash_bucket_size 512;
	types_hash_max_size 2048;
	# server_tokens off;
	# server_names_hash_bucket_size 64;
	# server_name_in_redirect off;

	##
	# Mime Settings
	##

	include /etc/nginx/mime.types;
	default_type application/octet-stream;

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	error_log /var/log/nginx/error.log;

	##
	# Gzip Settings
	##

	gzip on;
	gzip_static on;
	gzip_vary on;
	gzip_comp_level 6;
	gzip_min_length 1024;
	gzip_buffers 16 8k;
	gzip_http_version 1.1;
	gzip_types text/plain text/css text/javascript text/js text/xml application/json application/javascript application/x-javascript application/xml application/xml+rss application/x-font-ttf image/svg+xml font/opentype;
	gzip_proxied any;
	gzip_disable "MSIE [1-6]\.";

	##
	# LetsEncrypt Settings
	##

	include /etc/nginx/snippets/letsencrypt.conf;

	##
	# CLoudflare Settings
	##

	include /etc/nginx/snippets/cloudflare.inc;

	##
	# SSL Settings
	##

	include /etc/nginx/snippets/ssl.conf;

	##
	# Proxy Settings
	##

	include /etc/nginx/proxy_params;

	##
	# Proxy Cache
	##

	proxy_cache_path /var/cache/nginx levels=2 keys_zone=cache:10m inactive=60m max_size=1024m;
	proxy_cache_key "$scheme$request_method$host$request_uri";
	proxy_temp_path /var/cache/nginx/temp;
	proxy_ignore_headers Expires Cache-Control;
	proxy_cache_use_stale error timeout invalid_header http_502;
	proxy_cache_valid any 1d;

	##
	# FastCGI Settings
	##

	include /etc/nginx/fastcgi_params;

	##
	# FastCGI Cache
	##

	fastcgi_cache_path /var/cache/nginx/micro levels=1:2 keys_zone=microcache:10m max_size=1024m inactive=30m;
	fastcgi_cache_key "$scheme$request_method$host$request_uri";
	fastcgi_cache_methods GET HEAD;
	fastcgi_cache_use_stale updating error timeout invalid_header http_500 http_503;
	fastcgi_ignore_headers Cache-Control Expires Set-Cookie;
	fastcgi_cache_lock on;
	fastcgi_cache_lock_timeout 5s;
	fastcgi_cache_background_update on;
	fastcgi_cache_revalidate on;
	add_header X-FastCGI-Cache $upstream_cache_status;

	# Cache Bypass

	map $http_cookie $no_cache {
		default 0;
		SESS 1;
		wordpress_logged_in 1;
	}

	##
	# Logging Settings
	##

	access_log /var/log/nginx/access.log;
	# access_log off;
	error_log /var/log/nginx/error.log;
	log_format main '$remote_addr - $remote_user [$time_local] $request '
	'"$status" $body_bytes_sent "$http_referer" '
	'"$http_user_agent" "$http_x_forwarded_for"';
	log_format bytes '$body_bytes_sent';
	log_not_found off;

	##
	# Mapping
	##

	map $http_upgrade $connection_upgrade {
		default upgrade;
		'' close;
	}

	map $scheme $fastcgi_https {
		default off;
		https on;
	}

	map $remote_addr $proxy_forwarded_elem {
		# IPv4 addresses can be sent as-is
		~^[0-9.]+$ "for=$remote_addr";

		# IPv6 addresses need to be bracketed and quoted
		~^[0-9A-Fa-f:.]+$ "for=\"[$remote_addr]\"";

		# Unix domain socket names cannot be represented in RFC 7239 syntax
		default "for=unknown";
	}

	map $http_forwarded $proxy_add_forwarded {
		# If the incoming Forwarded header is syntactically valid, append to it
		"~^(,[ \\t]*)*([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|\"([\\t \\x21\\x23-\\x5B\\x5D-\\x7E\\x80-\\xFF]|\\\\[\\t \\x21-\\x7E\\x80-\\xFF])*\"))?(;([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|\"([\\t \\x21\\x23-\\x5B\\x5D-\\x7E\\x80-\\xFF]|\\\\[\\t \\x21-\\x7E\\x80-\\xFF])*\"))?)*([ \\t]*,([ \\t]*([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|\"([\\t \\x21\\x23-\\x5B\\x5D-\\x7E\\x80-\\xFF]|\\\\[\\t \\x21-\\x7E\\x80-\\xFF])*\"))?(;([!#$%&'*+.^_`|~0-9A-Za-z-]+=([!#$%&'*+.^_`|~0-9A-Za-z-]+|\"([\\t \\x21\\x23-\\x5B\\x5D-\\x7E\\x80-\\xFF]|\\\\[\\t \\x21-\\x7E\\x80-\\xFF])*\"))?)*)?)*$" "$http_forwarded, $proxy_forwarded_elem";

        default "$proxy_forwarded_elem";
	}

	##
	# File Host Cache (Static Assets)
	##

	open_file_cache max=10000 inactive=30s;
	open_file_cache_valid 60s;
	open_file_cache_min_uses 2;
	open_file_cache_errors off;

	##
	# Virtual Host Configs
	##

	include /etc/nginx/conf.d/*.conf;
	include /etc/nginx/sites-enabled/*;
}

--------- end nginx.conf-------

---------ssl.conf ------------

ssl_session_cache                  shared:SSL:20m;
ssl_session_timeout               60m;
ssl_session_tickets                 off;
ssl_buffer_size                        1400;
ssl_protocols                           TLSv1 TLSv1.1 TLSv1.2 TLSv1.3; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers      on;
ssl_stapling                              on;
ssl_stapling_verify                  on;
ssl_ciphers                               "**omitted **";
ssl_dhparam                            /etc/ssl/dhparam.pem;
ssl_ecdh_curve                       secp384r1;

resolver                                    127.0.0.53  valid=300s ipv6=off;
resolver_timeout                     30s;

add_header Strict-Transport-Security "max-age=31536000; includeSubdomains; preload"; 
# add_header Strict-Transport-Security "max-age=31536000;" always;
add_header X-Frame-Options SAMEORIGIN;
add_header X-Content-Type-Options nosniff;

----------- end ssl.conf--------

Nothing seems to work.

[acelaya]

Some architectural decisions have been made in Shlink that can make it more complex to set up in certain contexts.

I would suggest giving yourls a try instead.

[Surenthiran]

If you need help with the installation process, I can offer you my services. Shlink is a better option than yourls, as it runs more smoothly and efficiently.

[RR-Helpdesk]

I'm sharing an update regarding the issue which I don't think is related to CORS. While examining the server's response to the web client, I noticed that it abruptly shuts down but DOES generate a response with data, see attached files and errors.. Please refer to the attached screenshot. I'm wondering if the developer could take a look at this. This observation applies to both the self-hosted web client and the Shlink host client.

Response Files.zip

[acelaya]

This is a Javascript crash. Can you copy the contents of the "Console" tab?