### How to solve cross domain problems

---

 

**JSONP:**

 

-
The principle is : Dynamic insertion `script` label , adopt `script` The tag introduces a `js` file , this `js` After the file is loaded successfully, it will be executed `url` The function specified in the parameter , And will take what we need `json` Data is passed in as a parameter

-
Due to the limitation of the same source policy ,`XmlHttpRequest` Only current source requests are allowed ( domain name , agreement , port ) Resources for , In order to implement cross domain request , It can be done through `script` Tag implements cross domain request , Then output it on the server `JSON` Data and execute the callback function , Thus the cross domain data request is solved

- The advantage is good compatibility , Easy to use , Two way communication between browser and server is supported . The disadvantage is that it only supports it GET request

- `JSONP`:`json+padding`( Infill ), seeing the name of a thing one thinks of its function , That is to say `JSON` Fill it in a box

 

```js

function createJs(sUrl){

 

var oScript = document.createElement('script');

oScript.type = 'text/javascript';

oScript.src = sUrl;

document.getElementsByTagName('head')[0].appendChild(oScript);

}

 

createJs('jsonp.js');

 

box({

'name': 'test'

});

 

function box(json){

alert(json.name);

}

```

 

**CORS**

 

-
Server for `CORS` Support for , Mainly through the settings `Access-Control-Allow-Origin` On going . If the browser detects the appropriate settings , You can allow it `Ajax` Cross domain access

 

** By amendment document.domain To cross subdomains **

 

-
The `document.domain` Set to the same primary domain . prerequisite : These two domains must belong to the same base domain name ! And the protocol used , All ports should be consistent , Otherwise, it can't be used `document.domain` Cross domain . Same use of primary domain `document.domain`

 

** use window.name To cross domain **

 

-
`window` There is an object name attribute , This property has characteristics : In a window (`window`) In the life cycle of , All pages loaded by the window share one `window.name` Of , Each page faces window.name Both have read and write permissions ,`window.name` Is persistent in all pages loaded by a window

 

** use HTML5 Introduced by China and Singapore window.postMessage Method to transfer data across domains **

 

- also `flash`, Set proxy page and other cross domain methods on the server . in my opinion `window.name` The method is not complicated , It can also be compatible with almost all browsers , This is an excellent cross domain approach

 

** How to solve cross domain problems ?**

 

- `jsonp`, `iframe`,`window.name`,`window.postMessage`, Set proxy page on server

 

- How to solve cross domain problems ?

 

* `document.domain + iframe`: The primary domain name is required to be the same // Only child domains can be crossed

* `JSONP(JSON with Padding)``:`response: callback(data)`` // Support only GET request

* Cross domain resource sharing `CORS(XHR2)``:`Access-Control-Allow` // compatibility IE10+

* Cross document message transmission (HTML5):`postMessage + onmessage` // compatibility IE8+

* `WebSocket(HTML5):new WebSocket(url) + onmessage` // compatibility IE10+

* Server side set proxy request : The server is not restricted by the same origin policy

 

Technology