Simple request:

A request that satisfies both conditions is a simple request

(1) Request method is one of the following three methods:

HEAD

GET

POST

(2) HTTP headers do not exceed the following fields:

Accept: Specifies the return type, : text/plain (plain text type), text/ HTML (HTML type)

Accept-language Specifies the return Language

Content-language Specifies the Content Language

Last-Event-ID

Content-type: is limited to three values

Application/X-www-form-urlencoded: Send content is coded

Multipart /form-data: The uploaded form contains files

Text /plain: The sent content is in plain text format

Origin: protocol, domain name, and port number

Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
Copy the code

Upon receiving the request, the server checks to see if Origin is within its license and returns a normal Http response if it is not. The response header does not contain access-Control-allow-Origin. If within the permitted range, the response header is as follows:

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
Copy the code

Non-simple request

The following code is a non-simple request :(because its header contains x-custom-header)

var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
Copy the code

When the browser discovers that the Request is not simple and does not require user action, the browser automatically sends an OPTION Request (also known as precheck operation). The core content has two parts: access-Control-request-method indicates that the Method will be used in subsequent requests. Access-control-request-headers indicates that the content will be in the subsequent Request header.

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

After receiving the precheck request, the server checks that the special request method and header itself can be accepted, and the response header contains the following information:

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
Copy the code

The most important thing in the return message is that it specifies the request method and the contents of the Header that the server can accept. If the server supports headers and Methods in precheck, then the message can be sent normally.

The difference with normal and request responses is that CORS has more Origin in the request header, and access-Control-Allow-Origin in the response header.

How is it better than JsonP? JsonP supports only Get requests