Cors: standard scheme of cross domain resource request

CORS: Standard solution for cross domain resource requests

A previous article mentioned that we often encounter the failure of cross domain resource requests , Today, let's talk about the corresponding solutions .

First , Let's take a look at the solutions to cross domain problems .

1、 Using agents . principle ： Between the cross domain knowledge browser and the server , Build a service that does not cross domain with your front end, and do data transfer by yourself , You can avoid the cross domain problem of directly teaching the target server about resource requests .

2、 Use jsonp. Principle utilization script The mechanism of downloading and executing tags and calling corresponding functions is implemented , Only some scenarios can be solved .

3、 utilize iframe, Use window.name Pass on the reference . Not very well understood .

4、CORS

Definition and Usage ： It is one of the most common ways for modern browsers to support cross domain resource requests .

Usage method ： Generally, it is necessary for the back-end personnel to process the request data , Add related operations that allow cross domain

For simple requests and complex requests , It can be divided into two situations .

For simple requests , The browser will add a origin Field , Automatically bring the source information of the request .

For complex requests , The browser will send a formal request , Send a options request , Pre check .

The server will add the following fields in the response message ：

• Access-Control-Allow-Origin（ must ）： This field is used to inform the browser that the server can send cross domain AJAX Requested domain , Its value is either this time AJAX Automatically added by the browser in the request header Origin value , Or it can be a * Number , Indicates that any domain name request can be accepted ;
• Access-Control-Allow-Credentials（ Optional ）： This field is used to tell the browser whether the client is allowed to send to the server Cookie. By default ,CORS Specifications prevent cross domain AJAX Send to server Cookie, Therefore, the default value of this field is false, When you explicitly set the field value to true when , It means that cross domain is allowed this time AJAX Send to server Cookie.
• Access-Control-Expose-Headers（ Optional ）： This field is used to expose the available response header to the client ;

CORS Specifications stipulated , client XMLHttpRequest Object's getResponseHeader() Methods can only get 6 Basic fields ：
* Cache-Control： Indicates the caching mechanism followed by the response ;
* Content-Language： The language that represents the response body ;
* Content-Type： Representing the response body MIME type ;
* Expires： Indicates the expiration time of the document , Expiration is no longer cached ;
* Last-Modified： Indicates the last change time of the document ;
* Pragma： Used to contain specific instructions ;
But when the client wants to get additional response header fields , The server needs to define the corresponding response header field name that can be obtained by the client after this field .

Of course , There are many detailed scenes , Especially for cookie Some of the treatment of .

But all in all , If you are a front end , Encounter the problem of cross domain resource request failure , If the back end says he can't change , Then he must be an entry-level dish chicken of wechat .