Shulou(Shulou.com)06/01 Report--

This article shows you how to understand CORS, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can gain something.

CORS is a W3C standard, the full name is "cross-domain resource sharing" (Cross-origin resource sharing).

It allows browsers to send XMLHttpRequest requests to cross-source servers, thus overcoming the limitation that AJAX can only be used in the same origin. CORS needs to be supported by both the browser and the server. Currently, all browsers support this feature, and IE browsers cannot be lower than IE10. The whole CORS communication process is automatically completed by the browser and does not require the participation of users. For developers, CORS communication is no different from homologous AJAX communication, and the code is exactly the same. Once the browser finds that the AJAX request is cross-source, it will automatically add some additional header information, and sometimes an additional request, but the user will not feel it. Therefore, the server is the key to realize CORS communication. As long as the server implements the CORS interface, it can communicate across sources. Two kinds of request browsers divide CORS requests into two categories: simple requests (simple request) and non-simple requests (not-so-simple request). It is a simple request as long as the following two conditions are met at the same time. (1) the request method is one of the following three methods: HEADGETPOST (2) the header information of HTTP does not exceed the following fields: AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type: limited to three values: application/x-www-form-urlencoded, multipart/form-data, text/plain. Any request that does not meet the above two conditions at the same time is a non-simple request. Browsers handle these two requests differently. 3. Basic process of simple request 3.For simple requests, browsers issue CORS requests directly. Specifically, add an Origin field to the header information. Here is an example where the browser finds that this cross-source AJAX request is a simple request and automatically adds an Origin field to the header information. 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...

In the header information above, the Origin field is used to indicate which source this request comes from (protocol + domain name + port). Based on this value, the server decides whether to agree to the request or not. If the source specified by Origin is not within the scope of the license, the server returns a normal HTTP response. When the browser discovers that the header information of this response does not contain the Access-Control-Allow-Origin field (see below), it knows that there is an error and throws an error, which is caught by XMLHttpRequest's onerror callback function. Note that this error is not recognized by the status code because the status code of the HTTP response is likely to be 200. If the domain name specified by Origin is within the permitted range, the response returned by the server will have several more header information fields. 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

In the header information above, there are three fields related to the CORS request, all starting with Access-Control-. (1) Access-Control-Allow-Origin this field is required. Its value is either the value of the Origin field at the time of the request or a *, indicating that the request for any domain name is accepted. (2) Access-Control-Allow-Credentials this field is optional. Its value is a Boolean value indicating whether Cookie is allowed to be sent. By default, Cookie is not included in the CORS request. Set to true, which means that the server is explicitly licensed, and Cookie can be included in the request and sent to the server together. This value can only be set to true. If the server does not want the browser to send Cookie, delete this field. (3) Access-Control-Expose-Headers this field is optional. When a CORS request is made, the getResponseHeader () method of the XMLHttpRequest object can only get six basic fields: Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma. If you want to get other fields, you must specify them in Access-Control-Expose-Headers. The above example specifies that getResponseHeader ('FooBar') can return the value of the FooBar field. As mentioned above in the withCredentials attribute, CORS requests do not send Cookie and HTTP authentication information by default. If you want to send Cookie to the server, on the one hand, ask the server to agree, specify the Access-Control-Allow-Credentials field. Access-Control-Allow-Credentials: true

On the other hand, the developer must open the withCredentials property in the AJAX request. Var xhr = new XMLHttpRequest ()

Xhr.withCredentials = true

Otherwise, even if the server agrees to send Cookie, the browser will not send it. Alternatively, the server requires that the Cookie be set, and the browser will not handle it. However, if you omit the withCredentials setting, some browsers will still send Cookie together. At this point, you can explicitly close withCredentials. Xhr.withCredentials = false

It is important to note that if you want to send a Cookie,Access-Control-Allow-Origin, you cannot set it to an asterisk, and you must specify a clear domain name that is consistent with the requested web page. At the same time, Cookie still follows the same origin policy. Only the Cookie set with the server domain name will be uploaded, the Cookie of other domain names will not be uploaded, and the [xss_clean] in the (cross-source) original web page code cannot read the Cookie under the server domain name. 4. Non-simple request 4.1 pre-check request is the kind of request that has special requirements on the server, such as the request method is PUT or DELETE, or the type of Content-Type field is application/json. For CORS requests that are not simple requests, an HTTP query request, called a "pre-check" request (preflight), is added before formal communication. The browser first asks the server whether the domain name of the current web page is on the server's license list, and which HTTP verb and header information fields can be used. Only if you get an affirmative reply will the browser issue a formal XMLHttpRequest request, otherwise an error will be reported. The following is a JavaScript script for the browser. Var url = 'http://api.alice.com/cors';

Var xhr = new XMLHttpRequest ()

Xhr.open ('PUT', url, true)

Xhr.setRequestHeader ('XmurCustomConsumer headers,' value')

Xhr.send ()

In the above code, the method of the HTTP request is PUT and sends a custom header message X-Custom-Header. When the browser finds that this is not a simple request, it automatically sends out a "pre-check" request, asking the server to confirm that such a request can be made. Here is the HTTP header information for this "pre-check" request. 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...

The request method used for the "pre-check" request is OPTIONS, indicating that the request is used to ask. In the header information, the key field is Origin, indicating which source the request comes from. In addition to the Origin field, the header information of the pre-check request includes two special fields. (1) Access-Control-Request-Method this field is required to list which HTTP methods will be used in the browser's CORS request. The above example is PUT. (2) Access-Control-Request-Headers this field is a comma-separated string that specifies the additional header information field that will be sent by the browser CORS request. The example above is X-Custom-Header. 4.2 after receiving the "pre-check" request, the server can respond after checking the Origin, Access-Control-Request-Method and Access-Control-Request-Headers fields and confirming that cross-source requests are allowed. 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

In the HTTP response above, the key is the Access-Control-Allow-Origin field, which indicates that the http://api.bob.com can request data. This field can also be set to an asterisk to indicate that you agree to any cross-source request. Access-Control-Allow-Origin: *

If the browser rejects the "pre-check" request, a normal HTTP response is returned, but there are no CORS-related header fields. At this point, the browser determines that the server does not agree to the pre-check request, so an error is triggered and caught by the onerror callback function of the XMLHttpRequest object. The console prints out the following error message. XMLHttpRequest cannot load http://api.alice.com.

Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.

Other CORS-related fields that the server responds with are as follows. Access-Control-Allow-Methods: GET, POST, PUT

Access-Control-Allow-Headers: X-Custom-Header

Access-Control-Allow-Credentials: true

Access-Control-Max-Age: 1728000

(1) Access-Control-Allow-Methods this field is required, and its value is a comma-separated string indicating all cross-domain request methods supported by the server. Note that all supported methods are returned, not just the one requested by the browser. This is to avoid multiple "pre-check" requests. (2) Access-Control-Allow-Headers if the browser request includes an Access-Control-Request-Headers field, the Access-Control-Allow-Headers field is required. It is also a comma-separated string indicating that all header information fields supported by the server are not limited to those requested by the browser in pre-check. (3) Access-Control-Allow-Credentials this field has the same meaning as a simple request. (4) Access-Control-Max-Age this field is optional, which is used to specify the validity period of this pre-inspection request (in seconds). In the above result, the validity period is 20 days (1728000 seconds), which allows the response to be cached for 1728000 seconds (that is, 20 days), during which there is no need to issue another pre-check request. Once the server has passed the "pre-check" request, every normal browser CORS request will have an Origin header information field just like a simple request. The response from the server will also have an Access-Control-Allow-Origin header information field. The following is the browser's normal CORS request after the "pre-check" request. PUT / cors HTTP/1.1

Origin: http://api.bob.com

Host: api.alice.com

X-Custom-Header: value

Accept-Language: en-US

Connection: keep-alive

User-Agent: Mozilla/5.0...

The Origin field of the above information is automatically added by the browser. Here is the server's normal response. Access-Control-Allow-Origin: http://api.bob.com

Content-Type: text/html; charset=utf-8

In the above information, the Access-Control-Allow-Origin field must be included for each response. Comparison with JSONP CORS and JSONP are used for the same purpose, but they are more powerful than JSONP. JSONP supports only GET requests, and CORS supports all types of HTTP requests. JSONP has the advantage of supporting older browsers and the ability to request data from websites that do not support CORS. The above content is how to understand CORS. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.