How to set/enable access-control-allow-origin in strapi middlewares.js in strapi V4

[alireza]

System Information

• Strapi Version:
• Operating System:
• Database:
• Node Version:
• NPM Version:
• Yarn Version:

---

I have read several topics with related problems but non of them have solved my problem

here they solved it by changing middlewares.js

this person has the same problem.
this is the error I get in the client when fetching data from strapi API:

here is my middlewares.js:

module.exports = [
  "strapi::errors",
  "strapi::security",
  "strapi::poweredBy",
  {
    name: "strapi::cors",
    config: {
      enabled: true,
      header: "*",
      origin: [
        "example.com"
      ],
    },
  },
  "strapi::logger",
  "strapi::query",
  "strapi::body",
  "strapi::session",
  "strapi::favicon",
  "strapi::public",
];

and after this I find you might need to change server.js as well so I change it to this:

module.exports = ({ env }) => ({
  url: env("MY_HEROKU_URL"),
  host: env("HOST", "0.0.0.0"),
  port: env.int("PORT", 1337),
  app: {
    keys: env.array("APP_KEYS"),
  },
  name: "strapi::cors",
  config: {
    headers: [
      "accept-language",
      "Token",
      "Content-Type",
      "Authorization",
      "Accept",
      "Origin",
    ],
    origin: ["example.com"],
  },
});

[alireza]

and here is the network tap as you can see there is no access-control-allow-origin
in the response from strapi API: