ajax的同源策略和JOSNP跨域
Posted 贪吃ღ大魔王
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax的同源策略和JOSNP跨域相关的知识，希望对你有一定的参考价值。
一、ajax的同源策略
同源策略的基本概念
1995年，同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策。
同源策略：最初，它的含义是指，A网页设置的 Cookie，B网页不能打开，除非这两个网页"同源"。所谓"同源"指的是"三个相同"。
| 协议相同 域名相同 端口相同 |
举例来说，这个网址http://www.example.com/dir/page.html协议是http，
域名是www.example.com，端口是80（默认端口可以省略）。它的同源情况如下。
http://www.example.com/dir2/other.html：同源
file:///F:/phpStudy/WWW/day01/04-demo/04.html 不同源(协议不同)
http://v2.www.example.com/dir/other.html：不同源（域名不同）
http://www.example.com:81/dir/other.html：不同源（端口不同）
同源策略的目的
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据。
同源策略的限制范围
随着互联网的发展，“同源策略”越来越严格，目前，如果非同源，以下三种行为都将收到限制。
Cookie、LocalStorage 和 IndexDB 无法读取。
DOM 无法获得。
AJAX 请求在浏览器端有跨域限制
虽然这些限制是很有必要的，但是也给我们日常开发带来不好的影响。比如实际开发过程中，往往都会把服务器端架设到一台甚至是一个集群的服务器中，把客户端页面放到另外一个单独的服务器。那么这时候就会出现不同源的情况，如果我们知道两个网站都是安全的话，我们是希望两个不同源的网站之间可以相互请求数据的。这就需要使用到跨域 。
二、phpstudy中域名的配置
域名
就是在地址栏中输入的地址,每一个网站都有自己的域名
如 https://www.360.cn/
这些域名使用于互联网之中,在服务器上解析,所以可以在任何电脑中访问.
本地域名
在自己的电脑上利用Apache服务器,配置域名.只能在自己的电脑上访问.
实现方法
直接在phpstudy中配置即可.
配置vhosts.conf文件
修改hosts文件,将域名配置到本地
三、jsonp跨域
什么是跨域
域:表示不同的域名即网址不一样,如:www.baidu.com想访问www.edrc.cn就是不行的.
现在有两个网址 第一个 192.168.0.1 第二个 192.168.0.2 那么如果要在第一个的ip下.通过ajax访问第二个域名也是不可以的.
这是w3c组织为了安全性，做出的限制
• Ajax技术由于受到浏览器的限制(为了安全考虑)，该方法不允许跨域通信。
在两个不同域名之间互相,发ajax请求.
如何解决跨域
一个公司，有服务器a, 服务器b,如a服务器要引用b服务器上的图片
<img src=”http://www.b.com/a.jpg” />甚至这个图片的路径也可以是线上的.
因为src标签 是没有同源限制。可以借助与script标签中的src属性来实现跨域问题.
例1:编辑kuayu.js文件与kuayu.php文件,实现跨域
localhsot下面html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<script>
function fn(data){
console.log(data)
}
//凡是通过地址栏传参的都是get方式
</script>
<script src="http://www.2002.com/demo.php?callback=fn"></script>
</body>
</html>
2002.com下的php文件
<?php
// echo 'I love you';
// 获取get方式的参数
$fn = $_GET['callback'];
echo $fn.'("我来自php")';
?>
解释:
在PHP中把js中函数的名字当做字符串输出.然后浏览器进行解析之后.向下又执行.
这种方式的执行缺点是:不受人为的控制.只要页面刷新就会直接输出结果,我们不能对他进行任何的操作.
JOSNP跨域
json + 动态script
1 JSON可以传输大量数据。
2 script标签 是没有同源策略限制
思路
在需要用到外部跨域，再生成 script标签.
实际操作
script标签没有同源性问题，我们可以借助script标签中的src属性来实现跨域问题。为了灵活使用跨域，一般使用动态生成SCRIPT标签来引用外部JS来实现跨域。
JSONP是指客户端用GET方式传递一个callback参数给服务端，然后在服务端返回数据时将这个callback参数作为函数名来包裹住JSON数据来返回给客户端(生成JS代码)，然后客户端，用JS动态生成script标签，并指定该script的src属性等于服务器返回的数据(服务器生成的JS代码)，这样服务器端返回的数据，就可以成为脚本的一部分。并将该这样客户端就通过callback函数来处理返回数据了。
面试题:说一说json与jsonp的一个区别?
答：json是一种通用的数据交换格式，主要实现数据的传输与储存。
jsonp是一种非官方协议，主要为了解决Ajax跨域请求问题
工作中的写法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<script type="text/javascript">
//声明一个跨域的函数
function callback(msg){
for(var i in msg){
//将返回的内容直接追加到页面上
document.getElementById("show").innerHTML += msg[i]+'<br />';
//console.log(msg[i]);
}
}
//一个生成scrip标签,引入外部文件
window.onload=function(){
//给按钮绑定一个点击事件
document.getElementById("btn").onclick=function(){
//创建一个script标签
var script = document.createElement("script");
//为script指定一个url这个是跨域需要使用的
script.src="http://www.api.com/kuayu.php?fn=callback";
//将创建的节点追加到页面中
document.getElementsByTagName('head')[0].appendChild(script);
}
}
</script>
<body>
<input type="button" name="" id="btn" value="点击触发跨域请求">
<div id="show"> </div>
</body>
</html>
<?php
//获取方法名字
$fn = $_GET['fn'];
//设置我们需要返回的参数
$arr = array(
"name"=>'许文强',
'age'=>28,
'dream'=>'热爱国家'
);
//组织返回的字符串
echo $fn.'('.json_encode($arr).')';
?>
- 说白了，jsonp的原理就是 借助了script标签 src 请求资源时, 不受同源策略的限制.
- 在服务端返回一个函数的调用，将数据当前调用函数的实参。
- 在浏览器端，需要程序要声明一个全局函数，通过形参就可以获取到服务端返回的对应的值
现在最常用的跨域
服务器代理,
服务器端设置
以上是关于ajax的同源策略和JOSNP跨域的主要内容，如果未能解决你的问题，请参考以下文章