This content originally appeared on Level Up Coding - Medium and was authored by Tara Prasad Routray
Learn everything about cross-origin resource sharing (CORS), and how you can enable it in your applications.
Cross-Origin Resource Sharing (CORS) is a protocol that allows a client-side application to interact with a server-side application which belongs to a different origin. This is helpful when an application wants to make an API call to an external server in order to receive some response and display the data to its users. Most of the time you might get a CORS error at your end if you have not correctly configured it at the server-side.
In this article, I will give you a detailed walkthrough on cross-origin resource sharing (CORS), and shall instruct you to correctly configure it, so that you won’t get any error messages in your client-side application. Beginners and professional developers can benefit from this article.
Topics Covered
- The need to use CORS
- Identify a CORS response
- Types of CORS requests
- Enable CORS in an Express Application
- Enable CORS in a PHP Application
1. The Need To Use CORS
The same-origin policy (SOP) of web browsers block requests that point to a different origin. This feature ships with web browsers to prevent malicious sites from reading data, but this feature prevents some genuine use cases. For instance, you might want to make an API call to your backend server of different origin, but the same-origin policy of the web browser will reject the request (even if the server is owned by you).
The web applications built with Angular, React, Vue, and many more, might have backend servers on different origins. In these type of applications, the frontend is separated from the backend to make the applications load faster, secure, and maintain the modules easier for the internal team. In such use cases, the frontend applications make API calls to send and receive data from the server.
To overcome the problems that arise due to same-origin policy (SOP), the developers have used workarounds such as JSON-P, but the cross-origin resource sharing (CORS) fixes this easily.
2. Identify a CORS Response
You can identify a CORS response by looking at the response headers sent by a server. If a server is correctly configured to send response headers for supporting CORS, then the web browsers can use those headers to decide whether an XMLHttpRequest should continue or fail. The primary header that allows the support for CORS is Access-Control-Allow-Origin. Through this, a server can specify which origins can access its resources.
If a server wants to allow any origin to access its resources, then it can send the following response header.
Access-Control-Allow-Origin: *
If a server wants to allow a specific origin to access its resources, then it can send a similar response header.
Access-Control-Allow-Origin: https://tararoutray.com
Following is a snapshot of the CORS header sent by a server.
3. Types of CORS Requests
There are two types of CORS request: ‘simple’ request, and ‘preflight’ request. While making a CORS request, you don’t need to specify which type of request should be sent to the server. You just have to make a CORS request to an external server, and the web browser will decide which type will be used. Let’s have a glimpse at these two request types.
a) Simple Request
A web browser will consider a request as a ‘simple’ request only when it meets the following criteria:
- The GET, POST, or HEAD request method has been used.
- No ReadableStream object has been used.
- No event listeners have been registered on any XMLHttpRequestUpload object.
- A CORS safe-listed header has been used.
- A Content-Type header has been used, like: application/x-www-form-urlencoded, multipart/form-data, or text/plain.
b) Preflight Request
If a request does not match the above-mentioned criteria of being a ‘simple’ request, then an automated request will be made by the web browser using the OPTIONS request method. This request is called a ‘preflight’ request. It will be initiated by the web browser to determine the CORS abilities of the target server. If the response of the OPTIONS request tells that the request should be rejected, then the actual request to the server will get rejected.
When a ‘preflight’ request is made to a server, the following request headers are sent, so that the target server can identify what kind of request the user is trying to send:
- Access-Control-Request-Method (This denotes which HTTP request method will be used, like — GET, POST, etc.)
- Access-Control-Request-Headers (This denotes what custom headers will be sent, like — X-PINGOTHER, Content-Type)
- Origin (This denotes the URL of the client from which the request will be made, like — https://tararoutray.com)
4. Enable CORS in an Express Application
You can easily add support for CORS in an Express application. Refer to the following code snippet to understand how you can enable CORS in a few easy steps.
5. Enable CORS in a PHP Application
You can easily add support for CORS in a PHP application. Refer to the following code snippet to understand how you can enable CORS in a few easy steps.
Kudos! You have completed learning about Cross-Origin Resource Sharing (CORS), and how to correctly configure it in the Express and PHP applications.
If you enjoyed reading this post and have learnt something new, then please give a clap, share it with your friends, and follow me to get updates for my upcoming posts. You can connect with me on LinkedIn.
Understanding Cross-Origin Resource Sharing (CORS) was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.
This content originally appeared on Level Up Coding - Medium and was authored by Tara Prasad Routray
Tara Prasad Routray | Sciencx (2021-12-29T11:38:56+00:00) Understanding Cross-Origin Resource Sharing (CORS). Retrieved from https://www.scien.cx/2021/12/29/understanding-cross-origin-resource-sharing-cors/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.