Skip to content
Advertisement

Strapi v4 throwing cors exception

Im new to strapi and I have downloaded strapi v4 and as front-end I use vue.js.

Now I created categories and I am trying to fetch those with my vue app but I’m getting a cors error.

Access to XMLHttpRequest at 'http://localhost:1337/api/categories' from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

In the documentation I see I can override the origin on the cors middleware, but I don’t know how.

I’ve tried it with resolve and then set the config, but that breaks the cms.

  {
    resolve: 'strapi::cors',
    config: {
      origin: 'http://localhost:8080'
    }
  }

Answer

After spending a few hours on the internet I finally got it working.

In my config/middlewares.js I had to replace strapi::cors to this:

module.exports = [
  ...
  {
    name: 'strapi::cors',
    config: {
      enabled: true,
      header: '*',
      origin: ['http://localhost:8080']
    }
  }
  ...
];

Don’t forget to add port number, because it will not work if you don’t.

Advertisement