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.

sunwarr10r · Answer 1 · 2021-01-07T17:48:58.567

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.

This worked for me, thanks. I enabled "withCredentials" on my frontend after changing strapi permissions plugin to send me HttpOnly cookie with the JWT but of course, the CORS started complaining. Wanted to overwrite default strapi's origin: "*" but other options somehow did not work. — avepr, Apr 29 '21 at 01:22
If you're using strapi v4 just like me, take a look at [this](https://stackoverflow.com/questions/70639958/strapi-v4-throwing-cors-exception) — Refilon, Jan 09 '22 at 11:13

Lohith · Answer 2 · 2021-08-13T12:38:02.400

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

    };

score 1 · Answer 3 · answered Dec 12 '20 at 14:56

1

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

answered Dec 12 '20 at 14:56

MLH

149
2
4

score 0 · Answer 4 · answered Dec 10 '20 at 13:24

0

This issue can be fix by simply adding cors: { enabled: true, headers: '*' } in ./config/middleware.js

answered Dec 10 '20 at 13:24

Ruturaj Solanki

17
2

This worked for me. I have a question though - how will this affect security? – Mark Okhman May 16 '21 at 09:50
@MarkOkhman That's highly dangerous, that way you are exposing your API and it can be called from all webpages on the internet without any restrictions. – Abdalla Arbab Apr 04 '22 at 12:53

score -5 · Answer 5 · answered Sep 30 '20 at 04:22

-5

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

upgrade and migration strapi version.

answered Sep 30 '20 at 04:22

user1425431

41
3

How to solve CORS Policy problem in Strapi production build?

5 Answers5