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