Front-end to solve cross-domain problems
Same Origin Policy
Origin policy prevents a script loaded from one domain to obtain the document properties or operate on another domain. In other words, URL's domain must match the current request by
Web page of the same domain. This means that the browser isolate content from different sources, in order to prevent operation between them. This strategy is very old browser, from
Netscape Navigator version 2.0 to start there
What is JSONP?
JSONP (JSON with Padding) is an unofficial agreement that allows the server returned to the client side integration Script tags, through javascript
callback in the form of cross-domain access (this is just a simple realization JSONP form)
JSONP what's the use?
Since the same-origin policy restrictions, XmlHttpRequest only allowed to request the current resource source (domain name, protocol, port) in order to achieve cross-domain requests, you can
Cross-domain request script tag, and then outputs the data on the server and JSON callback function, so as to solve the cross-domain data request
How to use JSONP?
In a statement after the client callback function, the client requests data to the server via cross-domain script tag, and then the server returns the appropriate data and dynamic execution back
Transfer function
Jsonp principle:
First, the client registers a callback, then the callback name to the server.
At this point, Mr. json data to server.
Then manner javascript syntax, generates a function, parameter function name is passed up jsonp.
Finally json data directly into the reference mode, the function is placed, thus generating a js document grammar, back to the client.
The client browser parses script tag, document and execute javascript return, in which case the data as a parameter passed to the client predefined
callback function in. (dynamic callback function)
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url:"http://www.qcweb1.com/services.php",
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) { for(var i in result) { alert(i+":"+result[i]);//循环输出a:1,b:2,etc. } }, timeout:3000 }); </script>
<?php
// return JSON data server $ arr = array ( 'a' => 1, 'b' => 2, 'c' => 3, 'd' => 4, 'e' => 5);
$result=json_encode($arr);
//echo $_GET['callback'].'("Hello,World!")';
//echo $_GET['callback']."($result)";
// callback function Dynamic Execution
$callback=$_GET['callback'];
echo $callback."($result)";
?>
<script>
function kuayu(result){
console.log(result);
}
</script>
<script src="http://web2.com/server.php?callback=kuayu"></script>
the following
1, ajax jsonp and these two technologies is called in the "look" like an object, too, is a request url, then the server returns the data into the
Line processing, and therefore jquery ext jsonp like frame is encapsulated regarded as a form of ajax;
2, but the ajax and jsonp actually something different nature. Ajax is to acquire non-core content on this page by XmlHttpRequest, while the core is moving jsonp
State added <script> tag to call js script server.
3, so that, in fact, ajax and jsonp difference is not whether a cross-domain, as ajax proxy server can be achieved through cross-domain, jsonp itself does not exclude the same domain
Acquired data.
4, there is, jsonp is one way or the optional protocol, as ajax, like, it does not necessarily have to use json format to transfer data, if you
Willing, the string will do, but this is not conducive with jsonp provide public services.
All in all, not a special case jsonp ajax, even jquery and other giants into the jsonp package ajax, not change it!
Backend solve cross-domain problems
By setting the Access-Control-Allow-Origin to cross-domain
1, allows a single domain access
Specify a domain name (http://web1.com) cross-domain access, you can simply add the following code in the file header http://server.web.com/server.php:
header('Access-Control-Allow-Origin:http://web1.com');
2, allows multiple domain names
Specify more than one domain name (http: //web1.com,http: //web2.com etc.) cross-domain access, you can simply add the following code in the file header http://server.web.com/server.php:
$origin = isset($_SERVER['HTTP_ORIGIN'])? $_SERVER['HTTP_ORIGIN'] : ''; $allow_origin = array( 'http://client1.web1.com', 'http://client2.web2.com' ); if(in_array($origin, $allow_origin)){ header('Access-Control-Allow-Origin:'.$origin); }
3, allows all domain names
Allow all domain names simply add the following code http://server.web.com/server.php file header:
header('Access-Control-Allow-Origin:*');