Search code examples
node.jscorsstrapi

How to solve CORS policy problem for Strapi?


Problem about CORS policy : HELP

Description

Hello everyone !

I created a React app using Strapi for backend and I don't understand how to setup CORS policy. Strapi is on my online server, and I run React app on my local computer. When I tried to send a request with Axios, there is this problem :

Access to XMLHttpRequest at 'http://xx.xx.xx.xx/players' from origin 'http://localhost:3000' has 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.

I created the middleware.js file at config folder as it says in the documentation : https://strapi.io/documentation/v3.x/concepts/middlewares.html#configuration-and-activation

module.exports = {
  load: {
    before: ['timer', 'responseTime', 'logger', 'cors', 'responses', 'gzip'],
    after: ['parser', 'router'],
  },
  settings: {
    cors: {
      enabled: true,
      origin: ['*']
    },
  },
};

I've looked at all the forums and articles on the subject, I couldn't solve the problem.

System

  • Node.js version: v15.2.1
  • Strapi version: 3.3.2 (Community)

Solution

  • My fault. When I put Strapi on my server, I changed the ip address in my React application but forgot to specify the port used by Strapi. Don't do as I did! :/