理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。
何谓同源:
URL由协议、域名、端口和路径组成,如果两个URL的协议、域名和端口相同,则表示他们同源。
由于同源策略,而且随着互联网的发展,“同源策略”越来越严格。目前,如果非同源,共有三种行为收到限制。
同源政策规定,AJAX 请求只能发给同源的网址,否则就报错。
除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制。
文本将介绍分别 js 和 jquery 来使用 jsonp。
后面所有的例子都是运行在服务器环境下的。
好的,用一个简单的例子来引入问题,先看下面的demo:
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">script>
head>
<body>
<script>
$(document).ready(function(){
document.write('加载baidu静态资源公共库');
});
script>
body>
html>
这是我们开篇用的那个例子,在服务器环境下,能够正常运行,页面会有显示,也就是说我们成功的加载了来自于百度静态资源公共库中的 jquery
。
对的,我们跨域了吗?我们跨域了吗?
在这个例子中,其实我们已经跨域了,因为
这个 jquery
来自于百度静态资源公开库,百度的这个域名肯定与我们本地的不同,但是我们却成功的加载了这段 jquery
代码到我们的页面上。这是为什么呢?
浏览器会进行同源检查(看清楚,这里是浏览器会进行同源检测。),这导致了跨域问题,然而这个跨域检查还有一个例外那就是 HTML 的 标记;我们经常使用
的 src 属性,脚本静态资源放在独立域名下或者来自其它站点的时候这里是一个 url;这个 url 响应的结果可以有很多种,比如 JSON,返回的 json 值成为
标签的 src 属性值.这种属性值变化并不会引起页面的影响。 按照惯例,浏览器在 url 的查询字符串中提供一个参数,这个参数将作为结果的前缀一起返回到浏览器;
Web页面上调用 js 文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有“src”这个属性的标签都拥有跨域的能力,比如 、
、)
在浏览器中, 来加载跨域的资源的原因。
OK,下面我们来看一个 没跨域的情况下 使用 jquery 发出请求加载数据的例子:
后台代码(result.php):
if($_GET) {
$str = '{"id":"get"}';
echo $str;
}
if($_POST){
$str = '{"id":"post"}';
echo $str;
}
?>
我们在 demo.html 中使用 jquery 分别使用 GET 和 POST 方式 向 result.php 发出请求:
demo.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
head>
<body>
<a href="#" id="jq-get">jq-geta>
<br>
<a href="#" id="jq-post">jq-posta>
<br>
<p>后台返回的数据如下:p>
<div id="result">div>
<script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.js">script>
<script>
$('#jq-get').click(function(){
$.ajax({
type: "GET",
url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php",
data: {
"a": 1
},
dataType: "json",
success: function(data){
$('#result').html(data.id);
}
});
});
$('#jq-post').click(function(){
$.ajax({
type: "POST",
url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php",
data: {
"a": 1
},
dataType: "json",
success: function(data){
$('#result').html(data.id);
}
});
});
script>
body>
html>
demo.html 与 result.php 均在 8082 端口下,不存在跨域的情况,
运行效果图如下:
可见,在没有跨域的情况下,是很好用的。
下面,我们将 demo.html 移到本机的另一个端口(port: 3000)下,那么 demo.html 与 result.php 就存在了跨域的情况:
$('#jq-get').click(function(){
$.ajax({
type: "GET",
url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php",
data: {
"a": 1
},
dataType: "jsonp",
success: function(data){
$('#result').html(data.id);
}
});
});
result.php也有一点改动
if($_GET) {
$jsonp = $_REQUEST["callback"];
$str = '{"id":"get"}';
$str = $jsonp . "(" .$str.")";
echo $str;
}
关于 jsonp 为什么要这么写,结合文章开头说的 标签拥有跨域的能力以及之前的一篇文章 关于JSON和JSONP的详解
那么,我们 POST 方式 能不能这样用呢?
$('#jq-post').click(function(){
$.ajax({
type: "POST",
url: "http://10.2.229.89:8082/test-jq-jsonp/jsonp.php",
data: {
"a": 1
},
dataType: "jsonp",
success: function(data){
$('#result').html(data.id);
}
});
});
我们测试以后可以发现,虽然我们设置的是 POST 方式,但是调用的还是 GET 方法。那么 POST 方式跨域要如何解决呢?
我们需要在后台代码(result.php)文件头加入请求头和跨域权限:
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods:POST');
if($_POST){
$str = '{"id":"post"}';
echo $str;
}
?>