What is CORS (Cross Origin Resource Sharing)?
What is CORS?
CORS (Cross-Origin Resource Sharing) is a system, consisting of transmitting HTTP headers, that determines whether browsers block frontend JavaScript code from accessing responses for cross-origin requests.
ㄴ️Technically, that is the definition of CORS, but down below is what I think.
Mechanism to block unwanted requests in browser.
Preflight Request?
Before discussing how CORS cuts off unwanted requests, we have to talk about what a preflight request is.
I'll try to make it short.
If you make an actual request (by event or something), the browser makes a pre-request to see if the server is aware of using specific methods and headers.
This is basic behavior browser does before it makes a request.
By using this, we can avoid server running which we're not going to take data from and can ensure safety (by getting only getting data from known sources).
Without Preflight Request
Using Preflight Request
How CORS Works
browser verifies whether origin is allowed in Access-Control-Allow-Origin field of header in response.
This checks whether protocol + host + port is the same or not. (Same Origin Policy)
| protocol | host | port | path | query string | fragment |
|---|---|---|---|---|---|
| https:// | google.com | :443 | path | ?name=sam | #cache |
How to deal with CORS?
- Modify server to return
Access-Control-Allow-Originfield in response.- Try not to use
*. This could possibly cause serious security issues.
- Try not to use
- Use a Reverse proxy of Webpack Dev Server.
