CORS

CORS (Cross-origin resource sharing) “Cross-domain resource sharing.” Most browsers already support CORS (IE10 or more).

CORS Concept

If the cross-domain request sent by us is a “non-simple request,” the browser will first send a “preflight request” with the request type OPTIONS before issuing this request to verify that the request source is allowed for the server Source, which for the development of this is not felt by the browser agent.

All in all, the client does not need to do any special handling of cross-domain requests.

Simple request with non-simple request

“Simple request” satisfies the following characteristics:

  1. The request method is one of the following three methods:
    • HEAD
    • GET
    • POST
  2. HTTP header information does not exceed the following fields:
    • Accept
    • Acceptant Language
    • Content-Language
    • Last-Event-ID
    • Content-Type: application / x- Www-form-urlencoded, multipart / form-data, text / plain

Items that do not satisfy these features are called “non-simple requests”, for example: content-type = applicaiton / json, method = PUT / DELETE.

When a simple request

Browser determines that a cross-domain is a simple request, the Origin (protocol + domain name + port) field is added to the Request Header, which represents our request source and the CORS server will use the field as a cross-source flag.

After receiving this request, CORS will first determine whether Origin is within the scope of the source (determined by the server). If the authentication passes, the server will add the Access-Control-Allow-Origin in the Response Header. Access-Control-Allow -Credentials and other fields.

Required fields:

Access-Control-Allow-Origin: Indicates the source of the request that the client allows, * identifies any outer domain, multiple sources, separated

Optional field

Access-Control-Expose-Headers:

Parameters that get from the header when the getResponseHeader () method is called

After receiving the Respnose, the browser will determine whether the source has its own Access-Control-Allow-Origin allowed source, and if it does not, it will throw a “homology detection exception.”

Summary: A simple request only requires the CORS server to receive the Origin field after the cross-domain request, in the response header to add Access-Control-Allow-Origin and other fields to the browser to do homology judgment.

Non-simple request

for non-simple request, the browser will first issue the type of OPTIONS “preflight request”, the same request address, CORS server on the “preflight request” processing, and Response Header to add validation field, the client to accept To the return value of the preflight request to make a request for pre-judgment, after verification, the main request initiated.

For example: start content-type = application / json non-simple request, this time to note that the Senate for the json string

Summary: non-simple request requires CORS server to do the OPTIONS type of request to do the other consistent with the simple request

My .htaccess CORS configuration

<FilesMatch "\.(php|js|css|html|ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
	Header always set Access-Control-Allow-Origin "*"
	Header always set Access-Control-Max-Age "1000"
	Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin, authorization, accept, client-security-token"
</IfModule>
</FilesMatch>

🤓