In fact, very early contact with the front-end development has also dealt with cross-domain issues (at that time the use of Jsonp server+client are to change .... )
Now this is the time to do this record + finishing
What is the cross-domain problem GUI?
the URL of a website consists of a protocol name, a domain name, and a port number. such as http://www.sagosoft.com, where HTTP is the protocol name,www.sagosoft.com is the domain name, the port number is 80, when the page from a URL to request data, if the URL of the protocol name, subdomain, primary domain name , the port number has a different one, it will produce cross-domain problems.
even inhttp://localhost:8080/
page Requesthttp://127.0.0.1:8080/
There will also be cross-domain issues
What are the actions that cross-domain issues constrain?
Common page constraints among different domains DOM elements include:
window.location can be set, but cannot be read. Other location properties and methods are forbidden;
document.href can be set, but cannot be read. Other document properties and methods are forbidden;
<iframe> src can be set, but cannot read
Ajax access no return value??
cross-domain access is forbidden by the major browsers for security reasons, but the browser It is not forbidden to reference the JS files of other fields in the page, and can execute function in the introduced JS file freely .
Troubleshoot cross-domain issues
There are three ways to solve cross-domain issues
The solution of JSONP
Json≠jsonp
Principle
JSONP solves the cross-domain problem by the principle that the browser's script
label is not subject to the same-Origin policy restrictions (you can set the properties in your Web page to script
ask the src
path of the static file in the CDN server). Then you can use the script tag to get the data from the server, and when requested, add a callback method that you want to execute when the parameter is callbakc=.
Front-end implementation
An example of the Ajax method of jQuery2.1.3
$.ajax ({url: "", DataType: "Jsonp", data:{params: ""}}). Done (function (data) {//dosomething..})
It is simply not possible for the client to use JSONP to request data, because the JSONP request is placed in the script
label, and the normal request is different from the request is a JS code, if the server returned a JSON string, then the browser will be error. So JSONP return data requires some processing by the server.
Service-side return data processing
It says that the principle of JSONP is to use the script
label to solve the cross-domain, but the script
tag is used to get the JS code, then how can we get the requested data?
This requires the service side to do some judgment, when the parameter with the callback property, the returned type to be application/javascript
, the data as a callback parameter execution. The following is an example of the format of the data returned by JSONP
/**/typeof jquery21307270454438403249_1428044213638 = = = ' function ' && jquery21307270454438403249_ 1428044213638 ({"Code": 1, "MSG": "Success", "data": {"test": "Test"}});
This is the implementation code for express4.12.3 about JSONP
jsonp if (typeof callback === ' string ' && callback.length !== 0) { this.charset = ' Utf-8 '; this.set (' x-content-type-options ', ' Nosniff '); this.set (' Content-Type ') , ' Text/javascript '); // restrict callback charset callback = callback.replace (/[^\[\]\w$.) /g, "); // replace chars not allowed in javascript that are in JSON body = body .replace (/\u2028/g, ' \\u2028 ') .replace (/\u2029/g, ' \ \u2029 '); // the /**/ is a specific security mitigation for "Rosetta flash jsonp abuse" &nbSp;// the typeof check is just to reduce client error noise body = '/**/ typeof ' + callback + ' === \ ' function\ ' && ' + callback + ' (' + body + ') ;‘; }
Service-side Setup Access-control-allow-origin
This way, as long as the server side of the header of the response set Access-Control-Allow-Origin
to make can request the current domain name of the data domain can be. The general situation is under the can. This way, the client does not need to use JSONP to get the data.
There will be security issues.
Browser support
Access-control-allow-origin is a new standard HTML5, IE10 the following is not supported, so if the product is facing the PC side, it is necessary to use the server Agent or JSONP.
=========================================================================
Key Solutions:
JSONP (JQUERY-JSONP plugin without server do anything ~ ~ Perfect!! )
server proxy by creating a proxy on the Web server side of the same domain name, this needs to be done on the server side server load + + + + )
<script> cross-Domain get resource (required to return a normal JS object format such as JSON, JS Array)
Hide iframe, share domain( applies only on cross-domain requests that have the same parent domain )
About browser cross-domain issues Access-control-allow-origin