When users try to access different domain than the one which served itself comes in the purview of CORS. For example if you are on www.geekdirt.com and you try to access some resource of www.otherdomain.com using XMLHttpRequest. Without the use of CORS, user is not allowed to access the resouce of other domain using XMLHttpRequest .
How it works?
With each HTTP request a header is sent to server which is called request header. On processing the request server also sends a header which is called response header . By sending some information in these headers you can allow cross origin access.Like by sending Access-Control-Allow-Origin , server can convey which origin is allowed to access the resource and by sending Access-Control-Allow-Credentials server can convey that it would be able to access client cookies or not.
An HTTP/1.1 GET or a POST is used as request method. In the case of a POST, the Content-Type of the request body is one of application/x-www-form-urlencoded , multipart/form-data , or text/plain .
No custom headers are sent with the HTTP Request (such as X-Modified, etc.)
Java Script Code on Browser:
Suppose web content on domain http://foo.example wishes to invoke content on domain http://bar.other.
Request Header: Header which browser sends to server
Here you can see in line 2, host is bar.other while origin is http://foo.example , check line 10 . That means this request is for cross origin resourse.
Response Header: Header which server sends to browser in return
In the server response 4th line Access-Control-Allow-Origin: http://foo.example is indicating that server is allowing request only from http://foo.example. Server can also allow all the domains to access it’s resource by sending Access-Control-Allow-Origin: * .
Server PHP Code:
Simple Request with Credentials
By default, in cross-site XMLHttpRequest invocations, browsers don’t send credentials/cookies. To send cookies along with request a specific flag has to be set on the XMLHttpRequest object when it is invoked which is withCredentials = true . Browser will reject any response that does not have the Access-Control-Allow-Credentials: true header, and not make the response available to the invoking web content.
Java Script Code on Browser:
In line 7 , you can see that withCredentials flag is true. That means browser will be sending cookies with this request.
Here in line 11 you can see that a cookie is being sent with request.
Here you can see in line 6 that server is sending Access-Control-Allow-Credentials: true that means browser can accept the response. Without this flag browser would not accept the response.
Server PHP Code:
There were some limitations with Simple Requests which has been mentioned in Simple Request Section.
So if you want to send other cross origin request you have to send a preflighted request.
Preflighted Request uses methods other than GET, HEAD or POST. Also, if POST is used to send request data with a Content-Type other than application/x-www-form-urlencoded, multipart/form-data, or text/plain, e.g. if the POST request sends an XML payload to the server using application/xml or text/xml, then the request is preflighted. Also you can send custom(non standard) HTTP header with preflight request.The methos which is used to send these type of request is OPTION .
In the preflight workflow first a request is sent to server asking the user to permit http method, custom header etc. Server responds this request with a header with information like which http methods and which cutom headers are permitted. This response header has a expiry time attached with it.
That means only for that time you can send normal request to server with the allowed methods and header.Browser cache this header for that time and validate each request before sending it.
Here you can see that a post request is being send with content type application/xml that’s why it’s a preflighted request. Also a custom header ‘X-PINGOTHER’ is being sent with value ‘pingpong’ which is only allowed in preflighted requests.
Preflighted Request Header:
In line 1 you can see that http method OPTION is used to send the request. In line 11 you can see that it is requesting server to allow to send a custom header X-PINGOTHER . In line 10 it is indicating to server that next request it will be sending using POST method so allow that method.
Preflighted Response Header:
Line 4, Server is allowing client/browser to send request through http methods POST, GET, OPTIONS .
Line 5, Server is allowing custom header X-PINGOTHER.
Line 6, Max age of the response.After that browser would delete this response from it’s cache.
Normal Request Header (After the preflighted request):
Line 1, Sending POST request.
Line 9, Sending custom header.
Normal Response Header:
Line 1, response code is 200 it means server is executing the request successfully.