CORS

Same Origin Policy

• Browsers have some security policies to ensure the security of information transmission. Same Origin Policy is one of the security-related specifications, which restricts webpages to only access resources of the same origin.
• Same origin must meet the following three conditions:
  • Same communication protocol (protocol)
  • Same domain (domain)
  • Same communication port (port)

1. https://www.explainthis.com // Different domains (domain), not the same origin
2. http://www.explainthis.io // Different communication protocols (protocol), non-homologous
3. http://www.explainthis.io:5000 // different communication ports (port), non-same source
4. http://www.explainthis.io/ilikejavascript // same source
5. http://www.hello.explainthis.io // non-homologous

What does same-origin policy aim to protect?

• The browser's same-origin policy is like the most basic layer of protection mechanism, preventing websites from different origins from accessing resources and data.
• In addition, it should be noted that this blocking mechanism occurs after the browser receives the server-side response; that is, even if it is a non-same-origin request, if the server does not do any blocking and returns the result,the browser will successfully receive the response, but because it violates the same-origin policy, the browser will intercept the response and report an error.

Solve non-same-origin access with CORS

• In practical development, almost inevitably request non-same-origin resources, we can make these requests through CORS
• Cross-Origin Resource Sharing requires cooperation between req and server end
• if resource obtained is not from same origin, browser will initiate a CORS request, the requested server needs to have an additional HTTP header (Header) to tell browser that it is allowed to be acessed by this domain
• CORS header should be set by backend

Simple requests

• requests are all preflight by default, only when they meet certain conditions (like using GET HEAD methods) will they be called simple requests
• for simple requests, the browser will directly send the request to the server and include the origin in the header
• the server will then respond with Access-Control-Allow-Origin(key) header and the allowed origins (values)

// If you want to allow all cross-origin requests, you can use an asterisk
Access-Control-Allow-Origin: \*

// If you want to allow cross-origin requests from a specific origin, you can put this origin directly
Access-Control-Allow-Origin: https://www.explainthis.io

Preflighted requests

• method OPTIONS is used to preflight a request
• once preflight request successfully completed, real request will be sent

Why do we need preflight request? Wouldn't it be a waste of resources to make one more request before the official request?

• security. As same origin only blocks server response, if a malicious attacker sends a DELETE request, same origin policy will not block the request
  • preflight requests are just an additional layer of filtering.
• compatibility. A means to ensure that ther server has support before actually sending the request, sometimes a browser sends a req that is not supported by the server can cause problems on the server side

Reference

• ExplainThis (opens in a new tab)