About browser cross-domain issues Access-control-allow-origin

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

• Using JSONP

• Service-side Agent

• The domain name in the server-side settings Request Header header Access-Control-Allow-Origin for the specified available data

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