Strapi v4 throwing cors exception

Question

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 1

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.

Answer 2

I had same issue and problems with Refilons answer, but a look in the official docs of strapi solved it: https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html#cors

The header property has to be plural: headers: '*'.

In middleware config/middleware.js replace 'strapi::cors', with:

{
  name: 'strapi::cors',
  config: {
    enabled: true,
    headers: '*',
    origin: ['http://localhost:8080']
  }
},

As you read in the docs, you can also specify other cors properties like "methods".

"origin" can also be a String with '*' which allows all urls.