How to solve CORS Policy problem in Strapi production build?

Question

Does anyone now how to fix CORS errors for the Strapi backend? I am getting a similar message like the one below. I replaced my domain with example.com :

Access to fetch at ‘https://blog.strapi.io/ghost/api/v0.1/posts/?client_id=ghost-frontend&client_secret=1f230799b4ec&limit=2’ from origin ‘http://backend.example.com:1337’ has been blocked by CORS policy: Response to ´http://backend.example.com:1337/admin´ preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

I tried adding an origin to config/environments/production/security.json

"origin": "*"

"origin": "backend.example.com"

None of them worked. I am still getting the error.

I would apreciate some help on this.

Answer 1

For me the following configuration worked:

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

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

Setting headers: '*' is the simplest use of the access control protocol. The server sends back an Access-Control-Allow-Origin header with Access-Control-Allow-Origin: *, which means that the resource can be accessed by any origin.

If you wished to restrict access to the resource to requests only from https://foo.example, (so that no other domain than https://foo.example can access the resource in a cross-site manner), use the above setting, so that your server sends: Access-Control-Allow-Origin: https://foo.example

Note: When responding to a credentialed requests request, the server must specify an origin in the value of the Access-Control-Allow-Origin header, instead of specifying the "*" wildcard.

Answer 2

If you are in production then add the following content to ProjectRoot/config/env/production/middleware.js

P.S. update origin with yourown custom list of urls.

    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",
          ],
        },
      },
    };

make use of pm2 with necessary configuration for running the strapi project.

    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",
          },
         },
        ],

    };

Answer 3

The origin must be a array of urls. Like following

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

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