Three methods for implementing cross-origin access using Ajax

Three methods for implementing cross-origin access using Ajax
This article introduces three solutions for implementing cross-origin access through ajax, which are very practical. I personally recommend the third solution. You can focus on it.

 

 

1. What is cross-origin?

Let's first review the composition of the domain name address:

Http: // www. google: 8080/script/jquery. js

Http: // (Protocol Number)

Www (subdomain name)

Google (primary domain name)

8080 (port number)

Script/jquery. js (request address)

* When the protocol, subdomain name, primary domain name, and port number are different, they are regarded as different "domains ".

* Different domains request resources from each other, which is called "cross-origin ".

Example: http://www.abc.com/index.html request http://www.def.com/sever.php

2. method 1 for cross-origin processing-proxy (this method is "stupid" and will not be described in detail)

For example, there is a server in Beijing (www.beijing.com/sever.php) and Shanghai (www.shanghai.com/sever.php), and the backend in Beijing (www.beijing.com/sever.php) directly accesses the Shanghai Service and returns the obtained response value. That is, the service in Beijing acts as a proxy in the background. The front-end only needs to access the server in Beijing, which is equivalent to accessing the server in Shanghai. This kind of proxy is a background technology, so it is not described.

Iii. method 2 for cross-origin processing -- JSONP

Assume that:

?

1 2 3 4 5 6 7

Var eleScript = document. createElement ("script"); // create a script Element   EleScript. type = "text/javascript"; // declaration type,   EleScript. src = "http://www.bbb.com/getinfo.php"; // Add the src attribute to introduce the url for cross-origin access   Document. getElementsByTagName ("HEAD") [0]. appendChild (eleScript); // Add the newly created script element to the page

When a GET request is sent from. Let's look at the following column:

On the www.aaa.com page:

?

1 2 3 4 5 6 7 8 9 10 11

<Script>   Function jsonp (json ){   Document. write (json. name); // output Stephen Chow   }   <Script>   <Script src = "http://www.bbb.com/getinfo.php"> </script>

On the www.bbb.com page:

Jsonp ({"name": "Stephen Chow", "age": 45 });

That is, it is declared on the www.aaa.com page and called on the www.bbb.com page. However, JSONP only supports "GET" requests, but does not support "POST" requests.

Iii. method 2 for cross-origin processing -- XHR2 (recommended)

"XHR2" stands for "XMLHttpRequest Level2" is a method provided by html5. it provides good support for cross-origin access and has some new features.

* IE10 versions are not supported

* You only need to add the following code to the server header:

Header ("Access-Control-Allow-Origin :*");

Header ("Access-Control-Allow-Methods: POST, GET ");

For more information about "XHR2", you can refer to the official documentation, which is not described here. In short, this is a very useful method.

The above is all the content of this article. I hope you will like it.