The solution of jquery cross-domain problem

Source: Internet
Author: User

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 ;


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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.