1, What is CORS?
For security reasons, the browser restricts cross domain HTTP requests initiated by scripts unless the server agrees to access. For example, if the server's response Header to the pre check request contains access control allow origin: *, the cross domain request can be accessed correctly.
2, Examples of hazards
If the malicious web page contains such script code fetch("example.com"), and you have logged in to the example.com website and have not quit, if there is no CORS restriction at this time, the script code in the malicious web page will be executed smoothly through the server, and a large number of your personal information will be disclosed.
3, What is the pre inspection request?
In order to avoid the unknown impact of cross domain requests on the server's data, the browser will use the OPTIONS method to send a preflight request first, and then send the actual request after the server confirms that it can be accessed.
The following POST request will send the preview request first. You can view the specific connection and information in the network connection of the console.
var invocation = new XMLHttpRequest();
var url = 'http://bar.other/resources/post-here/';
var body = '<?xml version="1.0"?><person><name>Arun</name></person>';
function callOtherDomain() {
if (invocation) {
invocation.open('POST', url, true);
invocation.setRequestHeader('X-PINGOTHER', 'pingpong');
invocation.setRequestHeader('Content-Type', 'application/xml');
invocation.onreadystatechange = handler;
invocation.send(body);
}
}
4, How to use CORS?
CORS mainly works on the server. It tells the requester whether it can be accessed by returning different headers? The following two sections list all headers used in CORS and their meanings.
1. Other usage scenarios
CORS can cooperate with token to prevent CSRF attacks. Details, look here!
5, Client cross domain request
The following headers are used for cross domain requests. There is no need to set them manually. The browser will set them automatically.
1,origin
-
The source station name in the pre check request and the actual request does not contain any path information, but the server name.
Origin: <origin>
2,Access-Control-Request-Method
-
It is used to pre check the request and tell the server what method to use for the actual request: post, get, etc.
Access-Control-Request-Method: <method>
3,Access-Control-Request-Headers
-
It is used to pre check the request and tell the server to the header field carried by the actual request.
Access-Control-Request-Headers: <field-name>[, <field-name>]*
6, The server responds to cross domain requests
1,Access-Control-Allow-Origin
-
The foreign domain URI used to respond to the pre check request, indicating that the resource is allowed
// Allow all Access-Control-Allow-Origin: * // Only allowed http://mozilla.com Access-Control-Allow-Origin: http://mozilla.com
2,Access-Control-Expose-Headers
-
The custom Header must be set here before the client can access it normally
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
3,Access-Control-Max-Age
-
Set how many seconds the results of the pre check request can be cached?
Access-Control-Max-Age: <delta-seconds>
4,Access-Control-Allow-Credentials
-
When credentials=true is set in the cross domain request, but access control allow credentials: true is not set in the server response, the browser will not send the data returned by the server back to the requester.
Access-Control-Allow-Credentials: true
5,Access-Control-Allow-Methods
-
Used to respond to a pre check request, indicating the HTTP method allowed by the actual request
Access-Control-Allow-Methods: <method>[, <method>]*
6,Access-Control-Allow-Headers
-
It is used to respond to the pre inspection request and indicate the headers allowed in the actual request
Access-Control-Allow-Headers: <field-name>[, <field-name>]*