The solution of jquery cross-domain problem

Cross-domain Access when web front-end developers often encounter problems, then what is the cross-domain?

A cross-domain concept:

As long as the protocol, domain name, port any one different, are considered to be different domains. For example, in a Web site, we want to get the specific content of the B site through Ajax, when a site and B are not in the same domain, there is a cross-domain access problem. It can be understood that it is not safe to send requests or request data between two domain names without a cross-border domain name.

Ways to troubleshoot cross-domain access:

1. Agent ;

2. set the corresponding response header on the server side ;

3.JSONP.

Next, I'll explain in detail how Jsonp in jquery solves cross-domain access.

JSONP (JSON with Padding) is a "usage pattern" of data format Json that allows Web pages to obtain data from other domains.

Jsonp, also known as fill JSON, is a new way to apply JSON, but it is a JSON that is called in a function.

Components of the JSONP:

callback function: The function that should be called on the webpage when the response arrives;

Data: The JSON data in the callback function is passed in.

JSONP cross-domain Access principle:

Using the <Script> tag, the JS script file is used on the webpage to request data on different domains through xmlhttprquest.

Original JS cross-domain access:

There is a function in the background that handles the path "/test":

Path processing app.get ("/test", user.test);//handler function Exports.test=function (req,res) {    res.end ("alert (' JS cross-domain access ')");};

If you have a Web page that requires access to the contents of the path "/test", you can access it across domains via the JS script file:

Processing functions <script> function    Method (data) {        console.log (data);    } </script>//cross-domain access <script src= "Http://localhost:3000/test" ></script>

The result pops up a window on the current page:

Implementation of JSONP cross-domain access in jquery:

There is also a function in the background that handles the path "/test":

Path processing app.get ("/test", user.test);//handler function Exports.test=function (req,res) {  Res.end ("Method (" +json.stringify ({ MES: "Cross-domain access is successful!" "})+")");};

An external Web page requires access to the content under the path "/test", with Jsonp for cross-domain access:

Introducing the jquery function library <script src= "Http://localhost:3000/js/jquery-1.9.1.min.js" in cross-domain access ></script>// JSONP cross-domain access <script>    $.ajax ({        URL: "http://localhost:3000/test",        type: "Get" in jquery,        success: function (data) {            $ ("Body"). Append (Data.mes);        },        dataType: "Jsonp",        jsonpcallback: "Method"    }) ;</script>

The results will display the following information in the current Web page:

From the above code we can see that JSOPN cross-domain access and the original JS cross-domain access is different, JSONP does not need to write processing functions of cross-domain access (such as the method function used in the above methods), when Jsonp cross-domain access will automatically help us create a function to handle cross-domain access.

JSONP Benefits of cross-domain access:

1. It is not subject to the same-origin policy as Ajax requests implemented by XMLHttpRequest objects;

2. It has better compatibility and does not require XMLHttpRequest or ActiveX support;

3. After the request is complete, you can return the result by calling the callback method.

Jsonp Disadvantages of cross-domain access:

1. It only supports get requests and does not support post and other types of requests;

2. It only supports cross-domain HTTP requests, and it does not solve the problem of how to make JavaScript calls between two pages in a different domain.

JQuery cross-domain problem solving method