First, what is cross-domain?

1. Composition of URL

When it comes to cross-domain, we need to know the same origin policy. Before we know the same origin policy, we need to know the composition of URL. As shown in the figure:

  • The default protocol is HTTP. HTTPS is an encrypted version of HTTP. For security reasons, more and more websites use this protocol.

  • Host: A host is the name or domain name of the network or server where resources are located.

    document.location.host
Copy the code

  • Ports: The same domain may contain multiple web sites, separated by ports.

    document.location.port
Copy the code

  • Path: Path is the location of the resource site. As shown above:

    document.location.pathname
Copy the code

  • Query parameters: are additional parameters provided to the server. The position of the argument is after the path. Space.

    document.location.search
Copy the code

  • Anchor point: an anchor point inside a web page that automatically scrolls to when the browser loads the page. Anchors are named by the ID attribute of the page element.

2. Same-origin policy

Two urls are homologous if they share the same protocol, host (domain name), and port.

3, cross-domain

When the protocol, domain name, or port of two urls is different, the URL is cross-domain.

What are the cross-domain scenarios?

1. After the project goes online, the access address is inconsistent with the address requested by the interface, causing cross-domain problems

2. In the development stage of the project, the front and back end interconnecting interface was cross-domain

3. Iframe data communication across documents

Iii. Solutions

(The specific code is not given here, because the method is unique and the code solution is not unique)

1. CORS(Cross-source resource sharing)

When the project goes live, the deployment access address and the interface request address exist across domains, which generally requires the server (** backend personnel) ** to set up to allow the server to load these resources to other domains besides its own.

2, the acting

In the project development stage, because there is cross-domain between local localhost and request interface address, proxy server is generally configured or proxy is configured with Webpack to solve the cross-domain problem.

3, the json

Json is the use of

4, window. PostMessage

This is used to communicate between embedded iframe pages and embedded layer pages. PostMessage () allows secure cross-source communication. Of course, this kind of application scenario can be seen in large factories, and it should be difficult to meet in small factories. ** The iframe page needs to embed window.postMessage() to send messages, and the embedded page needs to listen to receive these messages via window.addeventListener. Refer to MDN for specific development.

The above is what I personally encountered in the project development and summarized according to my own ideas. I also referred to some article resources. If you have any questions, please correct them actively.