Reasons for cross-origin javascript and solutions _ javascript skills

This article mainly introduces the reasons for cross-origin javascript and the solution sharing. it is very detailed and comprehensive. if you need it, you can refer to it. Causes of cross-origin problems

Cross-origin is restricted by the browser same-origin policy. The js of the current domain name can only read window properties in the same domain.

Cross-Origin problems

Cross-origin issues occur when you use js to retrieve data from other websites on the page, for example, when ajax is used on a website to request data from other websites for weather, express delivery, or other data interfaces, and in the hybrid app, the browser will prompt the following error. In this scenario, the cross-origin issue of js needs to be solved.

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 on the current page 'is therefore not allowed access.

Which situations will cause cross-origin problems?

A website consists of the protocol name, subdomain name, primary domain name, and port number. For example, https://github.com/, where https is the protocol name, www is the sub-domain name, github is the primary domain name, port number is 80, when in the page from a url request data, if the protocol name, subdomain name, primary domain name, and port number of the url are different, a cross-origin problem occurs.
Cross-Origin problems occur even when http: // localhost: 80/is requested for http: // 127.0.0.1: 80 /.

Resolve cross-origin problems

There is one of the following methods to solve cross-origin problems:

Use jsonp
Server proxy
The server sets Access-Control-Allow-Origin in the Request Header to specify the domain name for data retrieval.

Jsonp solution

Json = jsonp

Principle

The principle of jsonp to solve 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 of the script on your webpage to ask the path of the static file on the cdn server ). Then, you can use the script tag to obtain data from the server. in the request, add a parameter callbakc = ?,? The callback method to be executed.

Front-end implementation

Take jQuery2.1.3's ajax method as an example.

The code is as follows:

$. Ajax ({
Url :"",
DataType: "jsonp ",
Data :{
Params :""
}
}). Done (function (data ){
// Dosomething ..
})

Only the client can use jsonp to request data, because the jsonp request is placed in the script tag, which is different from the common request in that it requests a piece of js code, if the server returns a json string, the browser reports an error. Therefore, the data returned by jsonp must be processed by the server.

Server Return Data processing

As mentioned above, the principle of jsonp is to use the script tag to solve cross-origin issues. However, the script tag is used to obtain js code. how can we obtain the request data.

This requires the server to make some judgments. when the parameter contains the callback attribute, the returned type is application/javascript, and the data is executed as the callback parameter. The following is an example of the format of the data returned by jsonp.

The code is as follows:

/**/Typeof functions = 'function' & jquery21307270454438403249_1428044425638 ({"code": 1, "msg": "success", "data": {"test ": "test "}});

This is the jsonp implementation code of express4.12.3.

 // 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" // the typeof check is just to reduce client error noise body = '/**/ typeof ' + callback + ' === \'function\' && ' + callback + '(' + body + ');'; }

Set Access-Control-Allow-Origin on the server

In this way, the server only needs to set Access-Control-Allow-Origin in the header of response as the domain name that can request data under the current domain name. Generally, it can be set. In this way, the client does not need to use jsonp to obtain data.
Whether security issues occur when Access-Control-Allow-Origin is set.

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

Browser support

Access-Control-Allow-Origin is a new standard in HTML5. IE10 or lower is not supported. Therefore, if the product is oriented to the PC end, use the server proxy or jsonp.

The above is all the content of this article, hoping to help you learn javascript cross-origin.