Skip to toolbar

What is CORS ? How to configure CORS in Strapi ?

CORS stands for Cross-Origin Resource Sharing. According to, Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. Simply, it is a web application security feature in a browser.

Image below shows how CORS is implemented :

Image :

We can see that contains an image from However, of course the image from is not stored in the web server of which means the image is fetched from

So, sends a GET request of image.png to the web server of This request is called a cross-origin request and it is controlled by CORS in the web server of In other words, The web server of must allow cross-origin requests from So that can retrieve the image or whatever it requests.

In Strapi, CORS is controlled in this path : ./config/environments/**/security.json

In idCardVerification strapi app, CORS is configured like this :

Actually, the image above is the CORS configuration in the development stage. So, you can make other folders inside ./config/environments/ to create production folder or test folder to configure CORS and put your domain in security.json.

You may wonder why http://localhost:3000 is there. In fact, I set my React app to run on port 3000 in localhost, in the development stage. Nevertheless, if you run your app in other ports, such as port 3001 which sends requests to your Strapi app, you can set it to http://localhost:3001.

Thank you for reading this article! See you in another Strapi post and have a nice day ~

Reference :

  1. Mozilla. ‘Cross-Origin Resource Sharing (CORS)’. [Online]. Available on : (Accessed on 17th July 2020).

Leave a Comment

Your email address will not be published. Required fields are marked *