First, understand cross-domain

1. What is the cross-domain?

Cross-domain refers to a document or script in a domain try to request resources in another domain, there is a broad cross-domain.

Broad cross-domain:

Resources Jump: A link to be redirected, the form is submitted.
Embedded resource: <link>, <script>, <img>, <frame> tag dom like, as well as the style background: url (), @ font-face () and other documents outside the chain.
Script request: js initiated ajax request, cross-domain operations dom and js objects and so on.

In fact, we usually refer to cross-domain is narrow, is limited by the browser requests a class-origin policy scene.

2. What is the origin policy?

Same Origin Policy / SOP (Same origin policy) is a convention, introduced the browser by Netscape in 1995, it is the core of the browser is also the most basic security feature, if the lack of the same origin policy, the browser is vulnerable to XSS , CSFR attacks. Homologous refers to the so-called " protocol + domain name + port ," the same three , even two different domain names point to the same ip address, nor homologs.

Several same-origin policy restrictions following behaviors:

Cookie, LocalStorage and can not read IndexDB
DOM objects can not be obtained and Js
AJAX request can not be transmitted

3, common cross-domain scenario

URL	Explanation	Whether to allow communication
http://www.domain.com/a.js http://www.domain.com/b.js http://www.domain.com/lab/c.js	The same domain name, or a different file path	allow
http://www.domain.com:8000/a.js http://www.domain.com/b.js	The same domain name, a different port	Not allowed
http://www.domain.com/a.js https://www.domain.com/b.js	The same domain name, different protocols	Not allowed
http://www.domain.com/a.js http://192.168.4.12/b.js	And domain names correspond to the same ip	Not allowed
http://www.domain.com/a.js http://x.domain.com/b.js http://domain.com/c.js	Same primary domain, subdomains of	Not allowed
http://www.domain1.com/a.js http://www.domain2.com/b.js	Different domain	Not allowed

4, cross-domain solutions

Use iframe.
Cross-Origin Resource Sharing (CORS)

Second, the cross-domain implementation

Scenario: If the IP address of my current server is 192.168.18.1 , port number 80 , you need to pass a parameter to the server 192.168.6.239 , port number 8080 on the server and get 192.168.18.239:8080 return to this service value.

1, using the iframe.

var push_url = 'http://192.168.6.239:8080/organize/user/add?user_id=1';
var iframe = document.createElement('iframe');
iframe.setAttribute("style", "display: none;");
iframe.setAttribute("src", push_url);
document.body.appendChild(iframe);

2. Cross-Origin Resource Sharing (CORS)

Ordinary cross-domain requests: only the server settings Access-Control-Allow-Origin can be, no need to set the front end, with a cookie request to: the front and rear ends need to be set.

Note that: Due to limitations of the same origin policy, read cookie cookie for cross-domain requests the domain interface, instead of the current page.

Currently, all browsers support this feature (IE8 +: IE8 / 9 XDomainRequest need to use objects to support CORS)), CORS has become the mainstream of cross-domain solutions .

Front-end code:

var push_url = "http://192.168.6.239:8080/organize/user/add?user_id=1" ; 
$ .ajax ({ 
    URL: push_url, 
    type: "the GET" , 
    xhrFields: { 
        withCredentials: to true   // front end whether with Cookie 
    }, 
    crossdomain: to true ,          // the additional information included in the header will make cross-domain request without containing Cookie 
    Success: function (Data) { 
        the console.log (Data); 
    } 
});

PHP code behind:

public  function actionAdd () 
{ 
    // allow cross-domain access Domain: If port needs to be written in full ( protocol + domain name + port ), if not the end of the port do not add '/', full domain name is "*", whether to allow cross-domain this is the main header head. 
    header ( "Access-Control-the Allow-Origin: http://192.168.2.119 " );

     // allow front-end with certification cookie: When turned on, the above domain name can not be '*', you must specify a specific domain name, browser will prompt 
    header ( "Access-Control-the allow-Credentials: to true" );
     // permission request mode 
    header ( "the allow-Access-Control-Methods: the POST, GE" );
     // permission request field, the client decision 
    header ( "Access-Control-the Allow-Headers: the Custom--X-header" ); 
    
    // other code ... 
    echo json_encode(['status' => 1, 'msg' => 'success']); 
}

Some of the concepts from the Friends of Bo reference herein blog, share a sense of Xiebo You: https://segmentfault.com/a/1190000011145364

This article is a summary of Kangaroo Kangaroo work, if reproduced, please indicate the source: https://www.cnblogs.com/chrdai/p/11280895.html

Cross-domain solution to the problem