Access to XMLHttpRequest on my Render Server being blocked by CORS policy

System Information
  • Strapi Version: 4.12.0
  • Operating System:
  • Database: Postgres
  • Node Version: 18.15.0
  • NPM Version: 6.14.18
  • Yarn Version: 1.22.19

Hello,

I have deployed my frontend on Vercel at https://shoplify-v1.vercel.app/
and Strapi backend on Render at https://strapi-ogtrannie.onrender.com/

Got these errors thrown when loading data:

Read the official documentation and made changes to my ./config/env/production/middlewares.js file as below:

  {
    name: "strapi::cors",
    config: {
      origin: [
        "https://localhost:3000",
        "https://localhost:1337",
        "https://strapi-ogtrannie.onrender.com/",
        "https://shoplify-v1.vercel.app/",
      ],
      methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
      headers: ["Content-Type", "Authorization", "Origin", "Accept"],
      keepHeaderOnError: true,
    },
  },

Cleared my browser’s cache and same CORS errors are still being thrown.
What am I missing here?

Any pointers will be much appreciated!