What is cross-domain? How many implementation forms are there for cross-domain?

Cross-domain is often encountered in js, and this article will explain it in detail.

The same-origin policy is a good security mechanism, but sometimes we need to obtain data or interact with different domains. At this time, the same-origin policy will cause obstacles.
Cross-domain is to realize the transmission and interaction of data information from different sources.
There are several ways to achieve cross-domain:
1.JSONP
JSONP is the abbreviation of JSON with padding (parametric JSON) and is a new application method of JSON.
The implementation of JSONP relies on the use of dynamic 3f1c4e4b6b16bbbd69b2ee476dc4f83a elements, because 3f1c4e4b6b16bbbd69b2ee476dc4f83a is not restricted by the same-origin policy and has the ability to load resources from other domains. Example:
Request through 3f1c4e4b6b16bbbd69b2ee476dc4f83a Return a JSONP

<script src=""http://freegeoip.net/json/?callback=handleResponse></script>

The returned JSONP consists of two parts: the callback function and the JSON data

handleResponse(JSON)

Due to the request through the 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag The data will be executed as js code, so the callback function will process the JSON data. In this example, the callback function is handleResponse. Usually the callback function name is written into the request URL as a parameter, and the callback function is defined locally.
Disadvantages: JSONP loads code from other domains for execution. If other domains are not secure, the response is likely to contain some malicious code. At this time, there is no way to pursue it except giving up using JSONP, so the security of the data source must be ensured. .
2.CORS
CORS (Cross-Origin Resource sharing, cross-origin resource sharing) is a method of Ajax cross-domain requests. It defines how the browser and the server should communicate when cross-domain resources must be accessed. .
The basic idea behind CORS is to use defined HTTP headers to allow the browser to communicate with the server to determine whether the request or response should succeed.
CORS is divided into simple requests and complex requests
Simple requests that meet the following two conditions at the same time:
1. The request method is one of get, post, and head;
2. The request header information does not exceed these fields: Accept, Accept-Language, Content-Language, Last-Event-ID, and Content-Type are limited to three values ​​application/x-www-form-urlencoded, multipart/form-data, text/plain
Simple request example:
When we send a simple request across domains, an Origin header will be defined to indicate the source of the request

Oring: http://www.baidu.com //Indicate that this request is issued by http://www.baidu.com

If the server thinks that this request is acceptable, it will return the same in the Access-Control-Allow-Origin header. Source information (assuming it is a public resource, you can return "*")

Access-Control-Allow-Origin:http://www.baidu.com

If there is no this If the header, or the source information of the header does not match, the browser will intercept the returned response.
Except for simple requests, they are all complex requests
Complex requests are similar to simple requests, except that before sending a formal request, a preflight request will be sent to confirm whether the current domain is within the server's permission range and the server can accept it. What HTTP header information, request method, data type, etc. Formal communication will not begin until permission is received.
The following are the preflight request headers and response headers

//This is a preflight request header OPTIONS /cors HTTP/1.1 //Note that the request returns options; Origin: https://api.qiutc .me //Request source; Access-Control-Request-Method: PUT //Request method Access-Control-Request-Headers: X-Custom-Header //Request header additional information; Host: api.qiutc.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
//This is a preflight response header HTTP/1.1 200 OKDate: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: https://api.qiutc.meAccess-Control-Allow-Methods: GET, POST, PUT //Indicates all cross-domain methods supported by the server Access-Control-Allow-Headers: X-Custom-Header //Indicates additional request headers supported by the server Content-Type: text/html; charset=utf-8Content-Encoding : gzip
Content-Length: 0Keep-Alive: timeout=2, max=100Connection: Keep-Alive
Content-Type: text/plain

This article explains in detail cross-domain related issues. For more related content, please pay attention to php Chinese website.

Related recommendations:

Summary of function events

##Related understanding of regular expressions

Usage of this in Javascript

The above is the detailed content of What is cross-domain? How many implementation forms are there for cross-domain?. For more information, please follow other related articles on the PHP Chinese website!