(AWS S3) Images work correctly, but can't see thumbnails (middleware is set up)

Questions and Answers
1
System Information
  • Strapi Version: v4.14.5
  • Operating System: Ubuntu 22.04.3 LTS x86_64
  • Database: PostgreSQL
  • Node Version: v18.18.2
  • NPM Version: 9.8.1
  • Yarn Version: 1.22.19

I have set up Strapi on my VPS, with images uploaded to S3. I have set up the middleware, but the list of thumbnails doesn’t load. If I open an image the thumbnail works, and I can download it correctly.

Here’s my middlewares.js (I omitted my S3 url here):

module.exports = [
  'strapi::errors',
  {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
        directives: {
          'connect-src': ["'self'", 'https:'],
          'img-src': [
            "'self'",
            'data:',
            'blob:',
            'dl.airtable.com',
            '*S3 URL*',
          ],
          'media-src': [
            "'self'",
            'data:',
            'blob:',
            'dl.airtable.com',
            '*S3 URL*',
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
  },
  'strapi::cors',
  'strapi::poweredBy',
  'strapi::logger',
  'strapi::query',
  'strapi::body',
  'strapi::session',
  'strapi::favicon',
  'strapi::public',
];

Here’s the CORS config in S3 (omitted URL):

[
      {
        "AllowedHeaders": ["*"],
        "AllowedMethods": ["GET"],
        "AllowedOrigins": ["*VPS URL*"],
        "ExposeHeaders": [],
        "MaxAgeSeconds": 3000
      }
    ]