Media Library failing to load with url field set in server.js

Questions and Answers Strapi Admin
1
System Information
  • Strapi Version: 4.13.7
  • Operating System: Ubuntu 20.04.6 LTS
  • Database: mySQL 8.0.34 (using mysql2 as driver)
  • Node Version: 18.18.0
  • NPM Version: 9.8.1
  • Yarn Version: none

Hi everyone.

When I try to load one or more images (size: 5kb) Strapi Admin get an error message:

Woops! Something went wrong. Please, try again.

The error in the browser console is:
immagine

No error messages on server log.

My config/server.ts:

export default ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: env('STRAPI_URL', '/strapi'),
  app: {
    keys: env.array('APP_KEYS'),
  },
  webhooks: {
    populateRelations: env.bool('WEBHOOKS_POPULATE_RELATIONS', false),
  },
});

My config/admin.ts:

export default ({ env }) => ({
  url: env('STRAPI_ADMIN_URL', '/strapi/admin'),
  auth: {
    secret: env('ADMIN_JWT_SECRET'),
  },
  apiToken: {
    salt: env('API_TOKEN_SALT'),
  },
  transfer: {
    token: {
      salt: env('TRANSFER_TOKEN_SALT'),
    },
  },
});

Admin build command:
NODE_ENV=production STRAPI_URL=/strapi STRAPI_ADMIN_URL=/strapi/admin npm run build

When I make the same test on local machine, without server url field definition, strapi admin works fine.
Can someone help me? Thank you in advance

2

Another information about my configuration:
to reach my server I configured apache server with a proxy.
This is the config:

<IfModule mod_ssl.c>
<VirtualHost *:443>
        ServerName mydomain
        ServerAlias mydomain
        ServerAdmin myemail
        DocumentRoot /var/www/mydomain/html

        <Directory /var/www/mydomain/html>
            Options Indexes FollowSymLinks
            AllowOverride All
            Require all granted
        </Directory>

        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        <IfModule mod_dir.c>
            DirectoryIndex index.php index.pl index.cgi index.html index.xhtml index.htm
        </IfModule>

	ProxyPreserveHost On
  	ProxyRequests Off
	ProxyPass /strapi http://localhost:1337
	ProxyPassReverse /strapi http://localhost:1337
3

UPDATE

I made some tests with the file appendSearchParamsToUrl.js adding some rows to modify the url and window.strapi.backendURL parameters.
The solution is not good because the problem is the composition of those parameters elsewhere but with this change I can use media now.

I’m waiting for a correct patch. This is a blocking issue.
Thank you

Temporary patch for appendSearchParamsToUrl.js

/**
 * Append the given search params to the given URL.
 *
 * @param {String} url The URL string to append the search params to
 * @param {Object} params The object of search params to append to the URL
 * @returns {String} A string representing the URL with the search params appended
 */
const appendSearchParamsToUrl = ({ url, params }) => {
  if (url === undefined || typeof params !== 'object') {
    return url;
  }

  var blob = url.split(':')[0] === 'blob'? 'blob:': '';
  if(blob) url = url.replace('blob:', '');
  url = url.replace(window.origin, '').replace(window.strapi.backendURL, '');
  if(!window.strapi.backendURL.startsWith(window.origin)) window.strapi.backendURL = window.origin + window.strapi.backendURL;
  if(!url.startsWith(window.strapi.backendURL)) url = blob + window.strapi.backendURL + url;
  
  console.log('*** STRAPI *** append', {url, params, origin: window.origin, backendURL: window.strapi.backendURL});
  const urlObj = new URL(url, window.strapi.backendURL);

  Object.entries(params).forEach(([key, value]) => {
    if (value !== undefined) {
      urlObj.searchParams.append(key, value);
    }
  });

  return urlObj.toString();
};

export { appendSearchParamsToUrl };