Application error: a client-side exception has occurred (see the browser console for more information)

Questions and Answers
1
System Information
  • Strapi Version: 4.1.0
  • Operating System: WIndows
  • Node Version: v16.14.0
  • NPM Version: >=6.0.0

so I’m working on this open source personal project and I decided to choose strapi as a CMS but I have been facing issues

Specifically
" Application error: a client-side exception has occurred (see the browser console for more information)."

Access to fetch at 'https://sitename.s3.us-west-1.amazonaws.com/poly_c2c2238ef5.glb' from origin 'https://www.sitename.xyz' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
sitename.s3.us-west-1.amazonaws.com/poly_c2c2238ef5.glb:1          Failed to load resource: net::ERR_FAILED
2865-dc21874319225d29.js:1 Could not load https://sitename.s3.us-west-1.amazonaws.com/poly_c2c2238ef5.glb: Failed to fetch
Ca @ 865-dc21874319225d29.js:1
framework-91d7f78b5b4003c8.js:1 Could not load https://sitename.s3.us-west-1.amazonaws.com/poly_c2c2238ef5.glb: Failed to fetch
uu @ framework-91d7f78b5b4003c8.js:1
main-3a77b9662cf4f5c9.js:1 Could not load https://sitename.s3.us-west-1.amazonaws.com/poly_c2c2238ef5.glb: Failed to fetch
ve @ main-3a77b9662cf4f5c9.js:1
main-3a77b9662cf4f5c9.js:1 A client-side exception has occurred, see here for more info: https://nextjs.org/docs/messages/client-side-exception-occurred

So i did some research and I found out you have to add origins to the middlewares so I did

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:",
            "sitename.s3.us-west-1.amazonaws.com",
          ],
          "media-src": [
            "'self'",
            "data:",
            "blob:",
            "sitename.s3.us-west-1.amazonaws.com",
          ],
          upgradeInsecureRequests: null,
        },
      },
    },
    settings: {
      cors: {
        enabled: true,
        headers: "*",
        origin: [
          "http://localhost",
          "https://sitename.s3.us-west-1.amazonaws.com",
          "https://www.mainsite.xyz/",
        ],
      },
    },
  },
];

But either I get a build error where it says, “Invalid middleware configuration. Expected Array<string|{name?: string, resolve?: string, config: any}.”

Or the backend doesn’t work I’m wondering if anyone is kind enough to help me with this I want to get this project out by this sunday or monday.