I. Cross-domain related concepts

  • You have to know what homology is before you cross domains. If the domain name, protocol, and port are the same, the domain name is the same as the port.
  • The same origin policy is the core security policy of the browser. The same-origin policy is used to defend against illegal attacks, but we cannot intercept all cross-domain objects just because we defend against illegal attacks.
  • Example of the same Origin policy:
Under the same domain name - http://www.a.com/a.js and http://www.a.com/b.js allow - http://www.a.com/lab/a.js and http://www.a.com/script/b.js Under the same domain name different folders allow - http://www.a.com:8000/a.js and http://www.a.com/b.js the same domain name, Different ports are not allowed - http://www.a.com/a.js and https://www.a.com/b.js are the same domain name, Different protocols are not allowed. - http://www.a.com/a.js and http://70.32.92.74/b.js Domain names and corresponding IP addresses are not allowed. - http://www.a.com/a.js and http://script.a.com/b.js Same primary domain, different subdomains disallowed - http://www.a.com/a.js and http://a.com/b.js have the same domain, Different secondary domain name (ditto) are not allowed (cookies this situation does not allow access) - different domain name http://www.cnblogs.com/a.js and http://www.a.com/b.js Don't allowCopy the code
  • The so-called cross-domain request means that the domain where the request is initiated is different from the domain where the resource to which the request is directed resides, that is, the cross-domain request is generated when the source is different.

Second, cross-domain solutions

  • Modify browser security Settings (highly recommended, unsafe)

  • Iframe (not recommended)

  • The json.

    • The idea is that Ajax has cross-domain security issues, but script tag references don’t.

  • Cross-origin Resource Sharing (CORS)

    • CORS is a new W3C standard that adds a new set of HTTP header fields that allow servers to declare which sources have access to which resources. In other words, it allows the browser to make cross-domain requests to the stations on which it has declared CORS.
    • Access-control-allow-origin HTTP header: access-Control-allow-origin
    • Using CORS has advantages over JSONP. JSONP only supports GET, which has many limitations. With CORS, the front-end encoding is no different from normal non-cross-domain requests.

  • The reverse proxy

    • By deploying a service that forwards interface requests before they reach the service, this is a reverse proxy. The front-end requests can be forwarded to other services by certain forwarding rules.
    • Through reverse proxies we unify front-end and back-end projects to provide external services through reverse proxies, so that there is no cross-domain appearance on the front end
    • The trouble with reverse proxy is the configuration of reverse proxy services such as Nginx, which is used in many of the current front-end separation projects.