CORS policy problem: Access-Control-Allow-Origin

Questions and Answers
1

Strapi Version: 3.0.0-beta.17.8

Well everything worked and for some reason my site just got blocked today.
I got this problem:
been blocked by CORS policy: Response to 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.

On my local it is working great, but for some reason I have this problem in the production.

2

Since you are using an outdated version strapi, do you have separate server.js files per environment?

3

Yes, I have different server.json files for each environment.

4

Can you attach middlewares and server configurations? You can replace the private fields.

5

This is my prod server:

{
  "host": "......",
  "port": "${process.env.PORT || 1337}",
  "production": true,
  "ssl": true,
  "proxy": {
    "enabled": false,
    "host": ".....",
    "ssl": true
  },
  "cron": {
    "enabled": false
  },
  "admin": {
    "autoOpen": false,
    "build": {
      "backend": "......"
    }
  }
}

And this is my prod security:

{
  "csp": {
    "enabled": true,
    "policy": ["block-all-mixed-content"]
  },
  "p3p": {
    "enabled": true,
    "value": ""
  },
  "hsts": {
    "enabled": true,
    "maxAge": 31536000,
    "includeSubDomains": true
  },
  "xframe": {
    "enabled": true,
    "value": "SAMEORIGIN"
  },
  "xss": {
    "enabled": true,
    "mode": "block"
  },
  "cors": {
    "enabled": false,
    "headers": "*"
  },
  "ip": {
    "enabled": false,
    "whiteList": [],
    "blackList": []
  }
}

And this is my middleware:

{
  "timeout": 100,
  "load": {
    "before": ["responseTime", "logger", "cors", "responses", "gzip"],
    "order": [
      "Define the middlewares' load order by putting their name in this array is the right order"
    ],
    "after": ["parser", "router"]
  },
  "settings": {
    "cors": {
      "enabled": true,
      "headers": "*"
    }
  }
}
6

It seems that maybe there is a problem with graphql, it can’t get it with POST.

7

In security you have:

cors": {
    "enabled": false,
    "headers": "*"
  },

It should be enabled

8

Yeah it was true and I had the same issue.

9

Then I would recommend you to upgrade to a stable version:

10

You have to understand that the CORS behavior is not an error — it’s a mechanism that’s working as expected in order to protect your users, you, or the site you’re calling. If I understood it right you are doing an XMLHttpRequest to a different domain than your page is on. So the browser is blocking it as it usually allows a request in the same origin for security reasons. You need to do something different when you want to do a cross-domain request. In this case you need to enable your service for CORS which is cross origin resource sharing.

If you want to bypass that restriction when fetching the contents with fetch API or XMLHttpRequest in javascript, you can use a proxy server so that it sets the header Access-Control-Allow-Origin to *.

If you need to enable CORS on the server in case of localhost, you need to have the following on request header.

Access-Control-Allow-Origin: http://localhost:9999

11

I get the same issue when calling ?filters[slug][$eq]=.
I used Plesk in DO server then you can try this.
Disable Proxy Mode at Nginx Settings.

  1. Go to Nginx Settings.
  2. Disable or Uncheck Proxy Mode

Screen Shot 2022-03-26 at 18.01.00
Screen Shot 2022-03-26 at 18.01.001395×981 153 KB

Thanks

2 Likes
12

I’m having the same issue in Strapi v4 in developer mode.