Strapi broken image when uploading to aws s3

user_16572960 0
Viewed 304

I installed aws s3 as an upload provider for my Strapi Backend:

// path: ./config/plugins.js

module.exports = ({ env }) => ({
  // ...
  upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        accessKeyId: env('AWS_ACCESS_KEY_ID'),
        secretAccessKey: env('AWS_ACCESS_SECRET'),
        region: env('AWS_REGION'),
        params: {
          Bucket: env('AWS_BUCKET'),
        },
      },
    },
  },
  // ...
});

It is connected to aws s3 but the image is broken when I uploaded it: Broken Image

And I still get the image uploaded to aws s3: AWS S3 Uploaded

I don't know how to fix this because I'm new to using Strapi and AWS S3. Thanks for your help!

strapi amazon-s3
2 Answers

You need to replace strapi::security string in ./config/middlewares.js with the following:

 {
    name: 'strapi::security',
    config: {
      contentSecurityPolicy: {
        useDefaults: true,
          directives: {
            'connect-src': ["'self'", 'https:'],
            'img-src': ["'self'", 'data:', 'blob:', `${process.env.AWS_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com`],
            'media-src': ["'self'", 'data:', 'blob:', `${process.env.AWS_BUCKET}.s3.${process.env.AWS_REGION}.amazonaws.com`],
            upgradeInsecureRequests: null,
        },
      },
    },
  },
user_142936760

Complementing that our friend commented above,remove AWS_REGION from url on config/middlewares.js file

The example file looks like this:

const BUCKET = process.env.AWS_BUCKET;
const BUCKET_URL = `https://${BUCKET}.s3.amazonaws.com`;

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