Cross-Origin Resource Sharing(CORS)
Cross-Origin resource sharing(cors) is a mechanism that describes the additional HTTP headers and provides to the browser to let web application which is running at one origin to get permission to access resources of a server at a different origin. Web applications use Cross-Origin HTTP request when requested resource has a different origin (domain, protocol, port) than its own origin. That means CORS allows a restricted resource to be accessible from another domain. The CORS allow to describe requested information to the server to read using browser.
Same-Origin Resource Sharing
Resources from domain let allow to interact with resources of the same domain but not with resources from different domain. Example: XMLHttpRequest and Fetch API belongs to same domain. For security reasons browser restrict to Cross-Origin HTTP requests.
Sending response and request:
When browser sends OPTION with origin and the value of origin is the domain then this domain become parent page. When page example.com wants to attempt data from service.com then following request header send to the service.example.com.
And the server at service.example.com response with
Access-Control-Allow-Origin: http://www.example.com, allows a particular domain
If Access-Control-Allow-Origin responds with ” * “, allowed to access all domains. This is wildcard policy.
If server does not allow Cross-Origin then browser will show error.
A wildcard policy is perfect when uses same-origin that is page and API’s intended to accessible to everyone.
When domain requesting to interact with another domain resource first domain add following requests in headers
Origin: The browser sends the OPTION request with Origin.
Access-Control-Request-Method: This shows to server which HTTP method will be used when the actual request made. HTTP method request includes GET,POST,DELETE.
syntax for Access-Control-Request-Method:
Access-Control-Request-Method: <method> For example,
Access-Control-Request-Headers: This header request is used when applying preflight request.
Syntax for Access-Control-Request-Headers:
Access-Control-Request-Headers: <header-name>,<header-name>, ………
When second domain adds response to first domain the second domain adds following response headers :
Access-Control-Allow-Origin: The value will be particular domain or * as mentioned above, allows particular domain or all domains respectively.
Access-Control-Allow-Headers: These headers are used to response preflight request this indicates actual request than. These response headers include values Accept, Accept-Language, Content-type, X-pingother
The syntax for Access-Control-Allow-Headers:
Access-Control-Allow-Headers: <header-name>[, <header-name>]*
Access-Control-Max-Age: This header gives the value in seconds how long response to preflight request can be cached for without sending another preflight request.
Access-Control-Allow-Methods: Methods used in reponses header such as GET, POST, OPTIONS, DELETE.
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Expose-Headers: Is indicates which header can be expose as a part of response.
Working of Cross-Origin:
User opens a web page and references another domain.
Users browser creates a connection to second domain by adding “Origin”.
And second domain responses with ‘Access-control-allow-origin’ HTTP header.
If the first domain makes a request then second domain response to the request.