CORS setting in middleware.js does not work

System Information
  • Strapi Version: 4.7.1.
  • Operating System: Win10
  • Database: on production PostgreSQL (v8.1)
  • Node Version: 16.15.1
  • NPM Version: 8.11.
  • Yarn Version:

I’m trying to fetch data from Strapi that is hosted on Railway to Vercel. Also using Cloudinary for image storing.

This is my middleware.js:

I’ve tried disabling CORS altogether with:

{
name: “strapi::cors”,
config: {
enabled: false,
header: “*”,
}
but that didn’t work. My fetch still rendered 403 error.

With the settings as in the above screenshot, I’m getting a server error 500:
-“Access to fetch at ‘htt ps://webshop-production-xxxx.up.railway.app/api/items?populate=image’ from origin ‘htt ps://webshop-one-xxx.vercel.app’ 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.”
-“GET htt ps://webshop-production-4b16.up.railway.app/api/items?populate=image net::ERR_FAILED 500”

What am I doing wrong? Why can’t I disable CORS altogether? How to fix this so I have CORS enabled and for it to work? I’ve been banging my head at this for many hours now. Any help is much appreciated.

I’m having the same problem, still does not work. Did something changed in v4?