Introduction to the

CORS requires both browser and server support. Currently, all browsers support this function, and Internet Explorer cannot be lower than Internet Explorer 10. Therefore, the key to CORS communication is the server. As long as the server implements the CORS interface, cross-source communication is possible.

request

1. Simple requests

  • The browser automatically adds Origin to the header
  • If Origin specifies a domain name within the license, the server returns a response with several additional header fields.
    • Access-Control-Allow-Origin: http://api.bob.com
      • (Can be * to allow all cross-domains)
    • Access-Control-Allow-Credentials: true
      • (Whether cookie can be sent, do not delete this field, default cookie is not included in the CORS request)
    • Access-Control-Expose-Headers: FooBar
      • GetResponseHeader (‘FooBar’) ¶ getResponseHeader(‘FooBar’) ¶
    • Content-Type: text/html; charset=utf-8
  • WithCredentials attribute
    • The server agrees to:Access-Control-Allow-Credentials: true
    • The developer opens this property in the AJAX request:xhr.withCredentials = true;

Attention!! To send cookies, access-Control-allow-origin cannot be set to * and must specify an explicit domain name consistent with the requested web page. At the same time, cookies still follow the same origin policy, only the Cookie set with the server domain name will be uploaded, cookies of other domain names will not be uploaded, and (cross-source) document. Cookie in the original web page code can not read cookies under the server domain name.

2. Non-simple request: One more HTTP query request

Requirements:

  • PUT
  • DELETE
  • content-type: application/json

Before communicating with the server, the server will ask if the web page is on the server’s list of approved XMLHttpRequest requests.

Attention!!!!! : If the server denies the precheck request and returns a normal HTTP response without any CORS related header fields, the browser decides that the server did not approve the precheck and throws an error that is caught by XMLHttpRequest’s onError callback function. Note that this error cannot be identified by the status code, because the status code for the HTTP response might be 200.

Precheck HTTP headers for requests

Key:

  • Origin: http://api.bob.com
  • Access-control-request-method: PUT (Request Method)
  • Access-control-request-headers: x-custom-header
    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...
Copy the code

Response to precheck request

Key:

  • Access-control-allow-origin: *
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 (indicates all cross-domain request Methods supported by the server) 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 Access-Control-max-age: 1728000 // (Specifies the validity period of this precheck request. During this period, no other precheck request is sent.)Copy the code