What is CORS?
Cross-origin resource sharing, or CORS, is an HTTP header-based mechanism originating from a server. The server indicates that other domains, schemes, or ports other than its own should permit resource loading.
When we're setting up an AJAX call, we use the `XMLHttpRequest` object to request data from a Web Server and the HTML DOM to display or use the data. This is a GET API call. JavaScript, however, can only make calls to URLs that live on the same origin as the location where the script is running. CORS allows us to add special headers (access-control-allow-headers) that relax the same-origin rule, and tell the browser "Hey, it's OK if the cross-origin requests are coming from these listed origins."
CORS Preflight Special Headers
CORS extends HTTP and adds two special headers.
Access-Control-Allow-Origin response header
This header tells the browser what origins are allowed to receive requests from this server. The origin responsible for serving resources will need to set this header. The line of code we're interested in looks like this:
```jsres.setHeader("Access-Control-Allow-Origin", "https://yoursite.com");```
This is telling our browser, "https://yoursite.com" may receive requests from this server. This header will have to be set by the owner of "https://yoursite.com".
Preflight Request
The preflight request is a little more complex, but is basically asking the server before sending the request, "Can I do this?"
Before sending the actual request, the browser will send what we call a preflight request, to check with the server if it allows this type of request. A preflight request is an OPTIONS request which includes the following headers:
- origin - The `origin` header cannot be changed programmatically, but is added by configuring your server configuration to allow CORS requests. You can learn more about the `origin` header here.
- access-control-request-method - tells the server which HTTP method the request implements
- access-control-request-headers - tells the server which headers the request includes
Conclusion
CORS allows AJAX and React developers to seamlessly update parts of themselves from a web server that is not the web server the request originated from. This is a powerful additional tool for their development toolkit. It requires a bit of a security work-around, but it's safe to use, and its benefits are worth it.
Frequently Asked Questions
What is CORS?
CORS stands for Cross-Origin Resource Sharing. It is an HTTP header-based mechanism that originates from a server and lets a browser load resources from a different origin than the one the server itself is on, where an origin is defined by domain, scheme, or port.
How does CORS work?
A server adds special response headers, such as Access-Control-Allow-Origin, that tell the browser which origins are allowed to access its resources. For example, res.setHeader("Access-Control-Allow-Origin", "https://yoursite.com") permits requests from that specific origin.
What is a CORS preflight request?
Before sending the actual request, the browser sends a preflight request, an OPTIONS request, to check whether the server allows that type of request. It carries the origin header along with access-control-request-method, which indicates the HTTP method, and access-control-request-headers, which lists the headers the request will include.
Why is CORS needed?
By default, JavaScript follows the same-origin policy, so it can only make requests to URLs on the same origin where the script is running. CORS relaxes that rule so a page can request resources from other origins that the server explicitly allows.
How is CORS different from the same-origin policy?
The same-origin policy is the browser's default restriction that blocks requests to other origins. CORS does not replace it but adds headers that relax it, letting the server permit specific cross-origin requests while the policy still applies elsewhere.
Is CORS safe to use?
Yes. Although CORS requires a bit of a security work-around to relax the same-origin rule, the article notes that it is safe to use and that its benefits are worth it, for example letting AJAX and React developers update parts of a page from a server other than the one the request originated from.
