什么是同源策略？



阮一峰的博客 同源策略 




同源策略的解决方法： 跨域传输


    img 标签的src是可以引入其他域名下的图片
    script标签的src属性同理 ，也可以引入其他域名下的js文件，并执行

    1.script的属性引入文件(页面地址)的时候是允许跨域
    2.在页面地址后,拼接?callback=参数，让后端能接受到我们的参数
    3.需要后端的配合，接收传过来的参数（函数名称），把我们处理好的json数据，作为函数的参数，再传回到前端
    4.把我处理好的json数据，作为函数的参数在传回到前端

    核心技术:
        前端定义函数后端调用函数
        （前端定义函数发送给后台，后台把数据作为定义函数的形参传给前端）

跨域传输例子：cross.html  跨域数据传输




 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <!--

          img 标签的 src 是可以引入其他域名下的图片，

          script 标签的 src属性同理，也可以引入其他域名(跨域)下的js文件，并执行

      -->

     <!--

         1. script的src属性引入文件(页面地址)的时候是允许跨域

         2. 在src地址后，拼接?callback=参数，让后端能接收到我们参数

         3. 需要后端配合，接收传过来的参数(函数名称)，

         4. 把我们处理好的json数据，作为函数的参数再传回到前端

         核心技术：

             前端定义函数，后端调用函数。

             (前端定义函数发送给后台，后台把数据作为定义函数的参数传给前端。)

     -->

     <img src="http://www.ruanyifeng.com/blogimg/asset/2016/bg2016041202.jpg" alt="">

 </body>

 </html>

 <script>

     function getCrossJson(json) {

         console.log(json);

         alert("我们在html页面创建了一个函数，但是不在这里调用");

     }

 </script>

 <!-- script 可以加载文件，并执行这些文件 -->

 <!--<script src="http://localhost/AJAX/day02/13_cross.php"></script>-->

 <!-- 跨域加载php文件 -->

 <script src="http://127.0.0.1/AJAX/cross.php?callback=getCrossJson"></script>




在服务器中的cross.php




 <?php

     header('Content-Type:text/javascript;charset=utf-8;');

     //    echo 'getCrossJson()';   写死的一个函数

     $callback = $_GET['callback'];

     // 读取一份json文件，把它放到$jsonStr变量里

     $jsonStr = file_get_contents('nav.json');

     echo "$callback($jsonStr)";

 ?>









 
												


											
Ajax--同源策略,jsonp跨域传输原理（callback），的更多相关文章
	

    
								
  1. 第二百七十四节，同源策略和跨域Ajax
		
    同源策略和跨域Ajax 什么是同源策略  尽管浏览器的安全措施多种多样,但是要想黑掉一个Web应用,只要在浏览器的多种安全措施中找到某种措施的一个漏洞或者绕过一种安全措施的方法即可.浏览器的各种保安措 ...
    
		
    2. 
						
  2. cors跨域和jsonp劫持漏洞   和    同源策略和跨域请求解决方案
		
    cors跨域和jsonp劫持漏洞: https://www.toutiao.com/a6759064986984645127/ 同源策略和跨域请求解决方案:https://www.jianshu.co ...
    
		
    3. 
						
  3. 11. cookie_session_原生ajax_readyState的值_同源策略_跨域_jsonp的使用
		
    1. cookie 浏览器存储技术.(服务器将少量数据交于浏览器存储管理) 作用: 存储数据, 解决 http 协议无状态问题 工作流程: 浏览器发送请求给服务器,请求登录 服务器返回响应给浏览器,此 ...
    
		
    4. 
						
  4. JSONP跨域的原理解析( 一种脚本注入行为)
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
    
		
    5. 
						
  5. JSONP跨域的原理解析
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
    
		
    6. 
						
  6. 【转】JSONP跨域的原理解析
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same-Origin Policy”(同源策略).这一策略对于Java ...
    
		
    7. 
						
  7. JSONP跨域的原理解析（转）
		
    JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源策略). ...
    
		
    8. 
						
  8. JSONP跨域的原理
		
    一种脚本注入行为 在 2011年10月27日 那天写的     已经有 12671 次阅读了 感谢 参考或原文   服务器君一共花费了23.005 ms进行了2次数据库查询,努力地为您提供了这个页面. ...
    
		
    9. 
						
  9. JSONP跨域的原理解析及其实现介绍
		
    JSONP跨域的原理解析及其实现介绍 作者: 字体:[增加 减小] 类型:转载 时间:2014-03-22 JSONP跨域GET请求是一个常用的解决方案,下面我们来看一下JSONP跨域是如何实现的,并 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 解决pycharm安装python库报错问题
			
    最近在玩微信图灵机器人,不过我安装有一些库,安装报错,上网找了很久,总结有两种方法,记录一下 方法一: 手动安装,直接到官网你需要的python库下载到本地, 放在安装python路径,C:\User ...
    
			
    2. 
						
  2. java — 抽象类和接口
			
    老生常谈的一个概念,很明确,不过我们多从几个角度来看下应该会有更好的理解,最近翻了下java8的某些新特性 关于接口的新特性让笔者受惊了,下面结合下做个总结,有更新的话直接在这里更新. 设计层面讲:  ...
    
			
    3. 
						
  3. Python学习day06-Python基础（4）流程控制之while和for循环
			
    Python学习day06-流程控制之while和for循环 Python学习day06-流程控制之while和for循环while循环1. 语法2. while+break,while+contin ...
    
			
    4. 
						
  4. Django项目: 4.用户登录登出功能
			
    用户登录登出功能 一.功能需求分析 1. 登录退出功能分析 流程图 功能 登录页面 登录功能 退出功能 二.登录页面 1. 接口设计 接口说明 类目 说明 请求方法 GET url定义 /user/l ...
    
			
    5. 
						
  5. python学习笔记3.3_json解析
			
    一.json文件读取 源文件:exampl.json 二.json在线解析 常用网站:https://www.json.cn/  三.数据导出为json格式文件
    
			
    6. 
						
  6. _strupr _wcsupr _mbsupr
			
    将字符串转化为大写的形式(Convert a string to uppercase.)定义: char *_strupr( char *string ); wchar_t *_wcsupr( wch ...
    
			
    7. 
						
  7. O(N)求出1~n逆元
			
    这是一个黑科技. 可以将某些题目硬生生地压到O(N) 不过这求的是1~n的逆元,多了不行-- 结论 接下来放式子: inv[i]=(M-M/i)*inv[M%i]%M; 用数学方法来表示: i−1=( ...
    
			
    8. 
						
  8. js/jquery判断一个对象是否为空
			
    一.js判断一个对象是否为空对象 1)通过JSON自带的.stringify方法来判断 //JSON自带的stringify方法,将json转成json字符串 var c = {}; if(JSON. ...
    
			
    9. 
						
  9. POSIX基本正则表达式和扩展正则表达式的比较
			
    转自:http://book.51cto.com/art/201303/385961.htm 在读者正觉得正则表达式已经复杂得不能再复杂时,又会发现POSIX规范将正则表达式的实现方法分为了两种:基本 ...
    
			
    10. 
						
  10. JEECMS 系统权限设计
			
    1.用户校验. 登录校验主要围绕着用户后台登陆的url拦截 a.围绕着用户登录过程中设计到两张用户表 jc_user:存储着用户的基本信息 jo_user:存储着用户登录.注册.更新时间及用户密码信息 ...
    
			
    11.