Jquery cross-origin access problem solution (Note) _ jquery-js tutorial

Source: Internet
Author: User
I have encountered cross-origin access in js before, but I may not take it seriously. I may have checked the relevant information. But when I encountered this problem again in two days, it took a lot of detours to find out the cause of the problem. Write down the solution and mourn for your memory. These two days need to implement a Level 3 domain name direct url rewrite to the site static page, such as http://123.456.789.com/UrlRewrite to the http://www.789.com/news/123.html

Speaking of this, it may be irrelevant to cross-origin access of JavaScript. In my mind, this issue is related to UrlRewrite. Okay now URLRewrite is all ready, enter the http://123.456.789.com directly in the browser's address bar/you will find that this is directly through.

Look at the URLs in the two address bars and suddenly pat your head. In the source code of this page, images, CSS, and JS are requested through relative paths. Of course, this in the direct access to the ghost to see the address bar two URLs are obviously different, such as images/1.gif in 1 is equivalent to the request http://www.789.com/news/1.gif and then 2 into what http://123.456.789.com/images/1.gifis very clear this image you are permanent and. Because you will never find this image in this path. Well, for the sake of simplicity, we don't need many methods introduced on the Internet, so we can use absolute paths. Okay, everything looks so natural and so smooth. But the real troubles are still behind.

Till now, it seems that we have no match with our title. Don't worry. The problem is always solved and the second problem occurs.

First of all, let's talk about this page. This page uses a program to statically present the originally dynamic content, but the static page must display some changed information, many people may want to use IFRAME to solve the problem, but this solution is not what I want to use. IFRAME is less efficient than other methods. IFRAME is unfriendly to crawlers. Therefore, I used JQUERY's load function to directly request a dynamic page and then display the returned dynamic information on the Static Page. Now, some friends may already know why this diary is called jquery cross-origin access.

First, let's take a look at my parameter $ ("# head") in the jquery load function "). load ("http://www.cnblogs.com/project/ajax.php" {"Action": "head"}); of course, the above lesson has changed the parameter to $ ("# head "). load ("http://www.789.com/project/ajax.php" {"Action": "head"}); but "jquery. lines 138 of js do not have permission to access "directly go to view juqery138 and coax the original load function with a problem here (I didn't understand the source code. To be honest, it's so painful. A bunch of compressed JS Code seems dead) okay, I went to Google on the Internet and several people's answers caught my attention. They all said that this is a problem with cross-origin JavaScript operations. JS itself cannot directly perform cross-origin operations. Then contact your third-level domain name URLRewrite and think about cross-origin issues, the domain under the third-level domain name is 789 and 456 under the third-level domain name is actually requested under the 789.com domain name. So what is this not cross-domain? Suddenly open. I am sure I have found the problem.

Google continues. Many people recommend jquery getJson to use the callback function to solve the problem. If the principle is solved, continue to study it. Solve the problem!

Jquery code for html pages

The Code is as follows:


$. GetJSON ("http://www.789.com/project/ajax.php? Action = head & callback =? ",
Function (data) {// parameter 1 passed to the background;
Var html = decodeURI (data. str)
Optional ('{head'{.html (html); // call p to display the content
});


Server-side PHP code

The Code is as follows:


$ Str ="


    This is test
";
$ Arr ['str'] = $ str;
$ Json = json_encode ($ arr); // use the Json_encode function to process php arrays.
Echo $ _ GET ['callback']. "(". $ json .")";


By now, we have successfully solved the problem of dynamic class capacity of the Cross-origin access server through the third-level domain name URLREWRITE to the static page!

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: info-contact@alibabacloud.com 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.