如何解决 Strapi 生产构建中的 CORS 策略问题？答案

【问题标题】：How to solve CORS Policy problem in Strapi production build?如何解决 Strapi 生产构建中的 CORS 策略问题？
【发布时间】：2020-09-12 12:33:56
【问题描述】：

现在有人如何修复 Strapi 后端的 CORS 错误吗？我收到如下类似的消息。我用 example.com 替换了我的域：

CORS 策略已阻止从源“http://backend.example.com:1337”获取“https://blog.strapi.io/ghost/api/v0.1/posts/?client_id=ghost-frontend&client_secret=1f230799b4ec&limit=2”的访问权限：对“http://backend.example.com:1337/admin”预检请求的响应未通过访问控制检查：否“访问-请求的资源上存在 Control-Allow-Origin 标头。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我尝试将来源添加到 config/environments/production/security.json

“来源”：“*”

"origin": "backend.example.com"

他们都没有工作。我仍然收到错误消息。

我希望能得到一些帮助。

【问题讨论】：

标签： nginx strapi

【解决方案1】：

https://github.com/strapi/strapi/issues/7296

升级和迁移strapi版本。

【讨论】：

【解决方案2】：

这个问题可以通过简单地添加来解决 cors: { enabled: true, headers: '*' } 在./config/middleware.js

【讨论】：

这对我有用。不过我有一个问题 - 这将如何影响安全性？

【解决方案3】：

来源必须是一个 url 数组。喜欢关注

origin: ["http://localhost", "https://backend.example.com"],

https://strapi.io/documentation/v3.x/concepts/middlewares.html#configuration-and-activation

【讨论】：

【解决方案4】：

对我来说，以下配置有效：

// file: root_project/config/middleware.js:

module.exports = {
  //...
  settings: {
    cors: {
      enabled: true, 
      // headers: '*', 
      origin: ["http://localhost", 'https://foo.example'],
    },
  },
};

设置headers: '*'是最简单的访问控制协议的使用。服务器返回一个带有Access-Control-Allow-Origin: *的Access-Control-Allow-Origin标头，这意味着该资源可以被any源访问。

如果您希望限制对资源的访问仅限来自 https://foo.example 的请求（这样除 https://foo.example 之外的其他域都不能以跨站点方式访问该资源），请使用上述设置，以便您的服务器发送：Access-Control-Allow-Origin: https://foo.example

注意：在响应凭证请求请求时，服务器必须在 Access-Control-Allow-Origin 标头的值中指定来源，而不是指定“@987654329 @" 通配符。

【讨论】：

这对我有用，谢谢。在更改了strapi权限插件后，我在前端启用了“withCredentials”以使用 JWT 向我发送 HttpOnly cookie，但当然，CORS 开始抱怨。想要覆盖默认strapi的来源：“*”但其他选项不知何故不起作用。
如果你和我一样使用strapi v4，看看this

【解决方案5】：

如果您在生产中，则将以下内容添加到 ProjectRoot/config/env/production/middleware.js

附注 使用您自己的自定义 URL 列表更新来源。

    module.exports = {
      load: {
        before: ["timer", "responseTime", "logger", "cors", "responses", "gzip"],
        order: [],
        after: ["parser", "router"],
      },
      settings: {
        timer: {
          enabled: true,
        },
        cors: {
          enabled: true,
          origin: [
            "https://www.example1.com",
            "http://www.example.com",
            "http://12.23.45.67:1234",
          ],
        },
      },
    };

使用 pm2 和必要的配置来运行strapi 项目。

    module.exports = {
      apps: [
        {
          name: "server",
          cwd: "/home/userName/Project/ProjectRoot",
          script: "npm",
          args: "start",
          max_memory_restart: "450M",
          env: {
            PORT: 1337,
            DATABASE_HOST: "",
            DATABASE_PORT: 5432,
            DATABASE_NAME: "projectABC",
            DATABASE_USERNAME: "USER",
            DATABASE_PASSWORD: "PASSWORD",
          },
          env_production: {
            PORT: 1337,
            NODE_ENV: "production",
            DATABASE_HOST: "",
            DATABASE_PORT: 5432,
            DATABASE_NAME: "xyz",
            DATABASE_USERNAME: "postgres",
            DATABASE_PASSWORD: "abc",
          },
         },
        ],

    };

【讨论】：