CORS (cross origin resource sharing) Cross-Origin Resource Sharing
Source: http://www.ruanyifeng.com/blog/2016/04/cors.html
It allows the browser to cross the source server, issued a request XMLHttpRequest, which overcomes the limitations of AJAX only homologous use.
Brief introduction
CORS need to support both browser and server. Currently, all browsers support this feature, IE browser can not be less than IE10.
CORS entire communication process, the browser is done automatically, without user intervention. For developers, there is no difference AJAX communication CORS communicate with homologous, exactly as it was. Once AJAX browser cross-origin request, it will automatically add some additional header information (add Origin attribute in the request header), and sometimes more than a request for additional time, but users do not have feelings.
Therefore, communication is the key to achieving CORS server. CORS long as the server implements the interface (add Access-Control-Allow-Origin header in the response), you can communicate across the source.
Of both the requests
CORS browser requests into two categories: a simple request (simple request) and requesting non-simple (not-so-simple request).
As long as both of the following two conditions belong to a simple request. Who do not meet the above two conditions, it is non-simple request. Browsers handle both of these requests, it is not the same.
(1) the request is one of the following three methods:
The HEAD
the GET
the POST
(2) HTTP header information does not exceed the following fields:Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain
Simple request
For a simple request, the browser sent directly CORS request. Specifically, it is in the request header information, the addition of a Origin field.
GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
The above header information, Origin field is used to illustrate, which source (port protocol name + +) from this request. Server based on this value, the decision whether to grant the request.
If Origin specified source, not within the scope of the license, the server returns a normal HTTP response. Browser found this response header information does not include Access-Control-Allow-Origin field (see below), you know wrong, so throw an error, is the XMLHttpRequest onerror callback function to capture. Note that this error code is not recognized by the state, because the HTTP response status code might be 200.
If Origin domain name specified in the license range, response returned by the server, a few extra header field.
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
The above header information, the three of CORS request related fields, are beginning to Access-Control-.
（1）Access-Control-Allow-Origin
This field is required. Its value is either the value of the field Origin request either a *, any request for acceptance of the domain name.
（2）Access-Control-Allow-Credentials
This field is optional. Its value is a Boolean value that indicates whether to allow sending Cookie. By default, Cookie CORS not included in the request. Set to true, it means that the server explicit permission, Cookie can be included in the request sent to the server. This value can only be set to true, if the server is not sent by the browser Cookie, you can delete the field.
（3）Access-Control-Expose-Headers
This field is optional. When the request is CORS, getResponseHeader XMLHttpRequest object () method to get only six basic fields: Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma. If you want to get the other fields must be specified in the Access-Control-Expose-Headers inside. The above example specifies, getResponseHeader ( 'FooBar') can return a value FooBar field.
withCredentials property
Speaking of the above, CORS request not to send default HTTP Cookie and authentication information. If you want Cookie to the server, the server agree on the one hand, specify the Access-Control-Allow-Credentials field.
Access-Control-Allow-Credentials: true
On the other hand, the developer must open withCredentials properties AJAX request.
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;Otherwise, even if the server agree to send Cookie, the browser will not be sent. Alternatively, the server requirements set Cookie, the browser will not be processed. However, if you omit withCredentials set, some browsers will send Cookie together. In this case, withCredentials explicitly closed (set to false).
Note that, if you want to send Cookie, Access-Control-Allow-Origin can not be set to an asterisk, you must specify clear, consistent with the domain name requested web page. Meanwhile, Cookie still follow the same-origin policy, only with Cookie domain name server settings will be uploaded, Cookie and other domain names will not upload, and (cross-source) the original page code can not be read document.cookie under the domain name server Cookie.
Non-simple request
Request is a non-simple that there is a request to the server special requirements, such as the DELETE or PUT request method is, or the type of field Content-Type is application / json.
Non-simple request CORS request, before the official communication, increase an HTTP query request, called "preflight" request (preflight).
The browser first asks the server, where the domain of the current web page whether in the license server list, and which HTTP verbs can and header field use. Only positive response, the browser will issue a formal request XMLHttpRequest, otherwise an error.
"Preflight" request using a request method OPTIONS, showing the request is used to query. Head inside information, key fields is Origin, which represents a request from the source.
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
Origin field addition, the header information "preflight" requests comprises two special fields.
（1）Access-Control-Request-Method
This field is required for lists of CORS browser HTTP request method which will be used, the embodiment is PUT.
（2）Access-Control-Request-Headers
This field is a comma-separated string that specifies the browser CORS request header field will be transmitted additionally, the examples are X-Custom-Header
Server receives a "pre-screening" after the request, checks the Origin, after the Access-Control-Request-Method and Access-Control-Request-Headers field to verify that allow cross-origin requests, we can respond.
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
（1）Access-Control-Allow-Methods
This field is required, its value string is a comma-separated cross-domain requests indicating that all methods that the server supports. Note that the return of all supported methods, rather than simply the method that the browser requests. This is to avoid multiple "preflight" request.
（2）Access-Control-Allow-Headers
When the browser requests include Access-Control-Request-Headers field of the Access-Control-Allow-Headers field is required. It is also a comma delimited string indicating the server supports all the header field is not limited to a browser request field in the "pre-screening" in.
（3）Access-Control-Allow-Credentials
The same meaning in the field with a simple request.
（4）Access-Control-Max-Age
This field is optional pre-screening is used to specify the current valid request, in seconds. Above results, the period is 20 days (1,728,000 seconds), allowing the cache to respond to the article 1728000 seconds (i.e., 20 days), during which the preflight not issue another request.
Once the server through a "preflight" request, after each time the browser requests a normal CORS, as it related to a simple request, there will be a Origin header field. In response to the server, you will also have an Access-Control-Allow-Origin header field.
And comparison of JSONP
CORS JSONP with the same purpose, but more powerful than JSONP.
JSONP only supports GET requests, CORS support all types of HTTP requests. JSONP advantage is to support older browsers, and can request data from the CORS site does not support.