What is cross-domain and how to solve it

I believe many people have heard of cross-domain, but many people don’t know what cross-domain means. So, let’s explain what cross-domain is and how to solve it.

1: What is cross-domain

Cross-domain means that the browser cannot execute scripts from other websites. It is caused by the browser's same-origin policy, which is a security restriction implemented by the browser on JavaScript. When a browser requests resources from a webpage in one domain name to another domain name, any difference in domain name, port, or protocol is considered cross-domain.

2: How to solve cross-domain issues

1. jsonp cross-domain

JSONP (JSON with Padding: filled JSON), one of the applications of JSON A new method,

The difference between JSON and JSONP:

1. JSON returns a string of data, while JSONP returns a script code (including a function call)

2. JSONP only supports get requests and does not support post requests

(similar to adding a script tag to the page and triggering a request for the specified address through the src attribute, so it can only be a Get request)

2. nginx reverse proxy:

www.baidu.com/index.html needs to call www.sina.com/server.php, you can write an interface www.baidu.com/server.php, by This interface calls www.sina.com/server.php on the backend and gets the return value, and then returns it to index.html

3. The PHP side modifies header

header(' Access-Control-Allow-Origin:*'); //Allow access from all sources

header('Access-Control-Allow-Method:POST,GET'); //Allow access method

４、document.domain

Cross-domain is divided into two types, one is that xhr cannot access documents from different sources, and the other is that different windows cannot interact with each other;

document.domain mainly solves the second situation, and can only be applied to the case where the main domain is the same and the subdomains are different;

The setting of document.domain is limited. We can only set document.domain to itself or a higher-level parent domain, and the primary domain must be the same. For example: the document.domain of a document in a.b.example.com can be set to any one of a.b.example.com, b.example.com, and example.com, but it cannot be set to c.a.b.example.com because this is the current The subdomain of the domain cannot be set to baidu.com because the main domain is no longer the same.

５. Window.name Key point: window.name shares a window.name in the life cycle of the page;

Compatibility: All browsers support it;

Advantages:

The simplest use of browser features to transfer data between different domains;

No special preparation of front-end and back-end is required;

Disadvantages :

Size limit: The maximum size of window.name is about 2M, and there will be different conventions in different browsers;

Security: All windows on the current page can be modified, which is very unsafe;

Data type: The data passed can only be limited to strings. If it is an object or other, it will be automatically converted into a string.

６、postMessage

Key points:

postMessage is a new concept introduced by h5. It is also being further promoted and developed. It has carried out a series of encapsulation , we can use it through window.postMessage, and can monitor the messages it sends;

Compatibility: The mobile terminal can be used with confidence, but the PC terminal needs to be downgraded

Advantages

Cross-domain can be achieved without back-end intervention, just one function plus two parameters (request url, send data);

Good mobile compatibility;

The above is the detailed content of What is cross-domain and how to solve it. For more information, please follow other related articles on the PHP Chinese website!