mirror of
https://github.com/qianguyihao/Web.git
synced 2024-10-30 12:34:46 +08:00
170 lines
4.0 KiB
Markdown
170 lines
4.0 KiB
Markdown
|
|
|||
|
## 同源和跨域
|
|||
|
|
|||
|
## 同源
|
|||
|
|
|||
|
同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口完全相同。
|
|||
|
|
|||
|
|
|||
|
|
|||
|
## 跨域问题的解决方案
|
|||
|
|
|||
|
从我自己的网站访问别人网站的内容,就叫跨域。
|
|||
|
|
|||
|
20180228_2231.png
|
|||
|
|
|||
|
出于安全性考虑,浏览器不允许ajax跨域获取数据。
|
|||
|
|
|||
|
|
|||
|
- iframe:处于安全性考虑,浏览器的开发厂商已经禁止了这种方式。
|
|||
|
|
|||
|
- JSONP:script 标签的 src 属性传递数据。
|
|||
|
|
|||
|
## JSONP
|
|||
|
|
|||
|
JSONP(JSON with Padding):带补丁的 json,本质是利用了 `<script src=""></script>`标签具有可跨域的特性,由服务端返回一个预先定义好的JS函数的调用,并且将服务器数据以该函数参数的形式传递过来。此方法需要前后端配合完成。
|
|||
|
|
|||
|
我们知道, html标签的 src 属性是支持跨域的:
|
|||
|
|
|||
|
```html
|
|||
|
<img src="http://img.smyhvae.com/2016040101.jpg" alt="">
|
|||
|
```
|
|||
|
|
|||
|
jsonp 就是利用这个特性实现的跨域,但用的是 script 标签。如下:
|
|||
|
|
|||
|
```html
|
|||
|
<!DOCTYPE html>
|
|||
|
<html lang="en">
|
|||
|
<head>
|
|||
|
<meta charset="UTF-8">
|
|||
|
<title>Document</title>
|
|||
|
</head>
|
|||
|
<body>
|
|||
|
|
|||
|
<!-- jsonp 就是 利用 src,实现的跨域 用的是 script标签 -->
|
|||
|
<script type="text/javascript" src='http://192.168.141.137/2018-02-28/myData.php'></script>
|
|||
|
</body>
|
|||
|
</html>
|
|||
|
|
|||
|
```
|
|||
|
|
|||
|
上方那一行的代码,意思是:刷新A服务器上的index页面后,会去请求 B 服务器上的 `myData.php` 这个页面。而且请求的方式是 get 请求。
|
|||
|
|
|||
|
但是 B 服务器上的页面不是你想请求就可以请求的,大家一起配合才可以。
|
|||
|
|
|||
|
|
|||
|
**具体实现步骤:**
|
|||
|
|
|||
|
需要首先声明的是,jsonp 只能通过 GET 方式进行请求。
|
|||
|
|
|||
|
(1)A客户端的代码:
|
|||
|
|
|||
|
```html
|
|||
|
<!DOCTYPE html>
|
|||
|
<html lang="en">
|
|||
|
<head>
|
|||
|
<meta charset="UTF-8">
|
|||
|
<title>Document</title>
|
|||
|
</head>
|
|||
|
<body>
|
|||
|
|
|||
|
</body>
|
|||
|
</html>
|
|||
|
<script type="text/javascript">
|
|||
|
|
|||
|
// 定义 eatFood()方法
|
|||
|
function fn(data) {
|
|||
|
console.log('我被调用了哦');
|
|||
|
console.log(data);
|
|||
|
}
|
|||
|
</script>
|
|||
|
|
|||
|
<!-- 使用 script标签 发送了 get请求 去到了一个 php页面 -->
|
|||
|
<script type="text/javascript" src='http://192.168.141.137/01.php?callback1=fn'></script>
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
我们来分析上方代码中的最后一行的那个url:A 客户端请求的是 B服务器上的 `01.php`页面。url里有个`callback1=fn`,意思是:callback1是A和B 之间的约定,约定后,将执行方法 fn。
|
|||
|
|
|||
|
其实,fn方法已经在最后一行代码中执行了。只不过,fn方法里的data数据,是从 B 服务器中获取的。
|
|||
|
|
|||
|
(2)B服务器端的代码:
|
|||
|
|
|||
|
```php
|
|||
|
<?php
|
|||
|
$mycallBack = $_GET['callback1'];
|
|||
|
|
|||
|
$arr = array("zhangsan","lisi","zhaoliu");
|
|||
|
|
|||
|
echo $mycallBack.`(`.json_encode($arr).`)`; //字符串拼接
|
|||
|
?>
|
|||
|
```
|
|||
|
|
|||
|
代码解释:
|
|||
|
|
|||
|
第一行的`callback1` 是A和B之间的约定,二者必须一致。
|
|||
|
|
|||
|
echo语句中输出的内容,即使要返回给A客户端的内容,此内容会保存在 A 客户端的fn方法的data里。 data[0]指的是 zhangsan。
|
|||
|
|
|||
|
|
|||
|
`json_encode`指的是,将php对象转化为 json。
|
|||
|
|
|||
|
|
|||
|
刷新A页面,输出结果为:
|
|||
|
|
|||
|
```
|
|||
|
mycallBack([zhangsan","lisi","zhaoliu])
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
## jQuery 中的 JSONP
|
|||
|
|
|||
|
我们知道,jQuery 中发送 Ajax 请求,格式是:
|
|||
|
|
|||
|
```javascript
|
|||
|
$("#btn").click(function(){
|
|||
|
$.ajax({
|
|||
|
url:"./data.php?callback1=fn",
|
|||
|
dataType:"jsonp",
|
|||
|
type:"get",
|
|||
|
//jsonp:"callback1", //传递给B服务器的回调函数的名字(默认为 callback)
|
|||
|
//jsonCallBack:"fn" //自定义的函数名称。默认为 jQuery 自动生成的随机函数名
|
|||
|
success:function(data){
|
|||
|
alert(data);
|
|||
|
//$("#showInfo").html(data);
|
|||
|
},
|
|||
|
error:function(e){
|
|||
|
console.log(e);
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
那如果数据是 JSONP,上方代码则改为:
|
|||
|
|
|||
|
|
|||
|
```javascript
|
|||
|
$("#btn").click(function(){
|
|||
|
$.ajax({
|
|||
|
url:"./data.php?fn",
|
|||
|
dataType:"text",
|
|||
|
type:"get",
|
|||
|
success:function(data){
|
|||
|
alert(data);
|
|||
|
//$("#showInfo").html(data);
|
|||
|
},
|
|||
|
error:function(e){
|
|||
|
console.log(e);
|
|||
|
}
|
|||
|
});
|
|||
|
});
|
|||
|
```
|
|||
|
|
|||
|
|
|||
|
|
|||
|
## 参考链接
|
|||
|
|
|||
|
参考链接:https://www.cnblogs.com/2050/p/3191744.html
|
|||
|
|