Strapi v4 抛出 cors 异常答案

【问题标题】：Strapi v4 throwing cors exceptionStrapi v4 抛出 cors 异常
【发布时间】：2022-04-24 18:51:06
【问题描述】：

我是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.

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

我已经用 resolve 尝试过，然后设置了配置，但这会破坏 cms。

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

【问题讨论】：

标签： javascript cors strapi

【解决方案1】：

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

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

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

不要忘记添加端口号，否则将无法正常工作。

【讨论】：

【解决方案2】：

我对 Refilons 的回答有同样的问题和问题，但是看一下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 属性，例如“方法”。

“origin”也可以是一个带有'*'的字符串，它允许所有的url。

【讨论】：