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'
}
}
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.
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.
This seem to work for me with "@strapi/provider-email-sendgrid":
middlewares.js
module.exports = [
...
{
name: "strapi::cors",
config: {
origin: ["*"],
methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
headers: ["Content-Type", "Authorization", "Origin", "Accept"],
keepHeaderOnError: true,
},
},
...
];