CORS stands for Cross-Origin Resource Sharing. According to developer.mozilla.org, 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 : developer.mozilla.org
We can see that domain-a.com contains an image from domain-b.com. However, of course the image from domain-b.com is not stored in the web server of domain-a.com which means the image is fetched from domain-b.com.
So, domain-a.com sends a GET request of image.png to the web server of domain-b.com. This request is called a cross-origin request and it is controlled by CORS in the web server of domain-b.com. In other words, The web server of domain-b.com must allow cross-origin requests from domain-a.com. So that domain-a.com 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
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 ~
- Mozilla. ‘Cross-Origin Resource Sharing (CORS)’. [Online]. Available on : https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS (Accessed on 17th July 2020).