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


I have deployed my frontend on Vercel at
and Strapi backend on Render at

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: [
      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!