### 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