JavaScript cross-domain causes and solutions sharing _javascript tips

The cause of the cross domain problem

Cross-domain problem is browser homology policy restrictions, the current domain name JS can only read the same domain window properties.

Scenarios generated by Cross-domain problems

When you want to use JS in the page to get data from other sites, there will be cross-domain problems, such as the use of Ajax in the site to request the weather of other sites, express or other data interface, and hybrid app request data, the browser will be prompted the following error. This scenario is going to solve the problem of JS cross domain.

XMLHttpRequest cannot load http://the domain name you requested. No ' Access-control-allow-origin ' header is present on the requested resource. Origin ' http://the domain name of the current page ' is therefore not allowed access.

What situations can cause cross-domain problems

A web site consists of the protocol name, sub domain name, main domain name, port number. For example, https://github.com/, where HTTPS is the protocol name, www is a subdomain, GitHub is the primary domain name, the port number is 80, when in the page from a URL request data, if this URL protocol name, subdomain, main domain name, port number any one has a different , a cross-domain problem can occur.
There will be cross-domain problems even in http://localhost:80/page requests http://127.0.0.1:80/

Resolving Cross-domain Issues

There are several ways to resolve cross-domain problems

Using JSONP
Service-side agents
Server-side setting the request header header Access-control-allow-origin to the domain name that specifies the data to be fetched

The solution of JSONP

Json≠jsonp

Principle

Jsonp the principle of resolving cross-domain problems is that the script tag of the browser is not subject to the same source policy (you can set the SRC attribute on your Web page to ask the path of the static file in the CDN server). You can then use the script tag to get the data from the server, and then add a parameter to the request to callbakc= the callback method you want to execute.

Front-End implementation

Take the Ajax method of jQuery2.1.3 as an example

Copy Code code as follows:

$.ajax ({
URL: "",
DataType: "Jsonp",
data:{
Params: ""
}
). Done (function (data) {
DoSomething..
})

Just because the client is using JSONP to request data is not possible, because JSONP's request is placed in the script tag, and the common request is different in that it is requesting a section of JS code, if the server returned the JSON string, then the browser will complain. So JSONP return data requires some processing from the service side.

Server-side return data processing

It says JSONP's principle is to use the script tag to solve the Cross-domain, but the script tag is used to get the JS code, so how do we get the requested data.

This requires the service side to make some judgments, 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

Copy Code code as follows:

/**/typeof jquery21307270454438403249_1428044213638 = = ' function ' && jquery21307270454438403249_ 1428044213638 ({"Code": 1, "MSG": "Success", "data": {"test": "Test"}});

This is express4.12.3 's implementation code for 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 this are in JSON body
 = Body
  . Replace (/\u2028/g, ' \\u2028 ')
  . Repla CE (/\u2029/g, ' \\u2029 ');

 The/**/is a specific security mitigation for "Rosetta Flash JSONP Abuse"
 //The TypeOf check are just to reduce C Lient Error noise Body
 = '/**/typeof ' + callback + ' = = ' function\ ' && ' + callback + ' (' + body + ');
 }

Service-Side Settings Access-control-allow-origin

This way as long as the service side of the header in response header set Access-control-allow-origin for the development of the current domain name can be requested data under the domain name. General conditions under the can. This way, the client does not need to use JSONP to get the data.
There is a discussion about whether the Access-control-allow-origin is set to have a security problem.

http://www.zhihu.com/question/22992229

Browser support

Access-control-allow-origin is a new standard HTML5, IE10 below is not supported, so if the product is oriented to the PC side, it is necessary to use a service-side agent or JSONP.

The above is the entire content of this article, I hope to be able to learn JavaScript across the domain to help.