{"id":355,"date":"2018-12-13T11:22:48","date_gmt":"2018-12-13T05:52:48","guid":{"rendered":"https:\/\/mediastroke.com\/blog\/?p=355"},"modified":"2018-12-13T15:12:03","modified_gmt":"2018-12-13T09:42:03","slug":"cross-origin-resource-sharing-cors","status":"publish","type":"post","link":"https:\/\/mediastroke.com\/blog\/cross-origin-resource-sharing-cors\/","title":{"rendered":"Cross-Origin Resource Sharing (CORS)"},"content":{"rendered":"
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\u00a0use Cross-Origin HTTP request when requested resource has a different origin (domain, protocol, port) than\u00a0its own origin. T<\/span>hat means CORS allows a restricted resource to be accessible from another domain. The CORS allow\u00a0<\/span>to describe\u00a0requested information to the server to read using\u00a0<\/span>browser.<\/span><\/p>\n Example : Front end of javascript code for web application from domain_a.com uses XmlHttpRequest\u00a0to make request domain_b.com<\/p>\n Resources from domain let allow to interact with resources\u00a0of the same domain but not with resources from different\u00a0domain.\u00a0<\/span>Example: XMLHttpRequest and Fetch API belongs to same\u00a0domain. For security reasons\u00a0browser restrict to Cross-Origin HTTP requests.<\/p>\n When browser\u00a0sends OPTION with\u00a0<\/span>origin\u00a0and the value of origin\u00a0is the domain then this domain become parent\u00a0page. When page example.com wants to attempt data from service.com then following request header send to the service.example.com.<\/p>\n Origin: http:\/\/www.example.com<\/p>\n And the server at service.example.com response with<\/p>\n Access-Control-Allow-Origin: http:\/\/www.example.com,<\/strong> allows a particular\u00a0domain<\/p>\n If Access-Control-Allow-Origin responds with ” * “<\/strong>, allowed\u00a0to access all domains. This is wildcard policy.<\/p>\n If server does not allow Cross-Origin then browser\u00a0will show error.<\/strong><\/p>\n A wildcard policy is perfect when uses same-origin that is page and API’s intended to accessible to everyone.<\/p>\n When domain requesting to interact with another domain resource first domain add following requests in headers<\/p>\n Origin<\/strong>:<\/strong>\u00a0 The browser sends the OPTION request with Origin.<\/p>\n Access-Control-Request-Method:\u00a0<\/strong>This shows to server which HTTP method will be used when the actual request made. HTTP method request includes GET,POST,DELETE.<\/p>\n syntax for Access-Control-Request-Method:<\/p>\n Access-Control-Request-Method: <method> <\/strong>For example,<\/p>\n Access-Control-Request-Method: POST<\/p>\n Access-Control-Request-Headers:<\/strong> This header request is used when applying preflight request.<\/p>\n Syntax for Access-Control-Request-Headers: When second domain adds response to first domain the second domain adds following response headers :<\/p>\n Access-Control-Allow-Origin:\u00a0<\/strong>The value will be particular\u00a0domain or *\u00a0 as mentioned above, allows particular domain or all domains respectively.<\/p>\n Access-Control-Allow-Creditionals:\u00a0<\/strong>Credentials are cookies, authorization headers or TLS client certificates. When a domain requests credential then browser response frontend JavaScript code if Access-Control-Allow-Origin value is true.<\/p>\n \u00a0 \u00a0 \u00a0Syntax:<\/p>\n Access-Control-Allow-Origin: true<\/p>\n Access-Control-Allow-Headers:<\/strong> These headers are used to response preflight request this indicates actual request than. These response\u00a0headers\u00a0include values Accept, Accept-Language, Content-type, X-pingother<\/p>\n The syntax for Access-Control-Allow-Headers:<\/p>\n Access-Control-Allow-Headers:<\/strong> <header-name>[, <header-name>]*<\/strong><\/p>\n Access-Control-Max-Age:<\/strong> This header gives the value in seconds how long response to preflight request can be cached for without sending another preflight request.<\/p>\n Access-Control-Allow-Methods:<\/strong> Methods used in reponses\u00a0header such as GET, POST, OPTIONS, DELETE.<\/p>\n For example,<\/p>\n Access-Control-Allow-Methods: GET, POST, OPTIONS<\/p>\n Access-Control-Expose-Headers:\u00a0<\/strong>Is indicates which header can be expose as a part of response.<\/p>\n User opens a web page and references another domain.<\/p>\n Users browser creates a connection to second domain by adding “Origin”.<\/span><\/p>\n And second domain responses with \u2018Access-control-allow-origin\u2019 HTTP header.<\/p>\n If the first domain makes a request\u00a0then second domain response\u00a0to the request.<\/span><\/p>\nSame-Origin Resource Sharing<\/h3>\n
Sending response and request:<\/h3>\n
Request Headers:<\/h3>\n
\nAccess-Control-Request-Headers: <header-name>,<header-name>, ………<\/strong><\/p>\nResponse Headers:<\/h3>\n
Working of Cross-Origin:<\/h3>\n