Strapi v4抛出cors异常

Question

我是strapi的新手，我已经下载了strapi v4，作为前端，我使用vue.js.

现在我创建了类别，并试图用我的vue应用程序获取这些类别，但我遇到了一个cors错误。

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.

在我看到的文档中，我可以覆盖cors中间件上的原点，但我不知道如何覆盖。

我已经下定决心尝试过了，然后设置了配置，但这破坏了cms。

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

Answer 1

在互联网上花了几个小时后，我终于让它工作了。

在我的config/middlewares.js中，我不得不将strapi::cors替换为：

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

不要忘记添加端口号，因为如果不添加，它将不起作用。

Answer 2

我对Reflons的答案也有同样的问题，但在strapi的官方文档中查看一下就解决了：https://docs.strapi.io/developer-docs/latest/setup-deployment-guides/configurations/required/middlewares.html#cors

标头属性必须是复数：headers: '*'。

在中间件config/middleware.js中，将'strapi::cors',替换为：

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

正如您在文档中所读到的，您还可以指定其他cors属性，如"；方法"；。

"原点"；也可以是一个带有"*"的字符串，它允许所有url。

Answer 3

这似乎适用于我的"strapi/provider电子邮件sendgrid"：

中间件.js

module.exports = [
...
{
name: "strapi::cors",
config: {
origin: ["*"],
methods: ["GET", "POST", "PUT", "PATCH", "DELETE", "HEAD", "OPTIONS"],
headers: ["Content-Type", "Authorization", "Origin", "Accept"],
keepHeaderOnError: true,
},
},
...
];