什么是同源策略？



阮一峰的博客 同源策略 




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


    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. 批量插入或更新操作之ON DUPLICATE KEY UPDATE用法
			
    实际的开发过程中,可能会遇到这样的需求,先判断某一记录是否存在,如果不存在,添加记录,如果存在,则修改数据.在INSERT语句末尾指定ON DUPLICATE KEY UPDATE可以解决这类问题.  ...
    
			
    2. 
						
  2. Django之模板语言(四) ------>Tags
			
    案例1:单层for循环 # Django 模板语言测试代码 def template_test(request): name_list=["张三","李四",& ...
    
			
    3. 
						
  3. <爬虫>用正则爬取B站首页图片
			
    import re import requests headers = { 'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) Apple ...
    
			
    4. 
						
  4. Ajax请求参数传到后台为空
			
    1.编码格式 $.ajax({ method:'POST', url:'/midservice/studentAction/addStudent', data:$.toJSON(userDate),  ...
    
			
    5. 
						
  5. MapReduce深入理解输入和输出格式（1）-输入分片与记录
			
    一个输入分片( in put split)就是能够被单个map 操作 处理的输入块. 每一个map 操作只处理一个输入分片,并且一个一个地处理每条记录,也就是一个键/值对.输入分片和记录都是逻辑上的, ...
    
			
    6. 
						
  6. Ubuntu下samba的安装和配置
			
    samba是Linux系统上的一种文件共享协议,可以实现Windows系统访问Linux系统上的共享资源,现在介绍一下如何在Ubuntu 14.04上安装和配置samba一. 一.更新源列表 打开&q ...
    
			
    7. 
						
  7. Python开发利器Pycharm
			
    可以新建项目的时候,在下面的小扳手那里创建虚拟化环境.若想安装包,直接file->setting里面找到对应项目,然后添加新的包即可.   视频地址:http://edu.51cto.com/c ...
    
			
    8. 
						
  8. php表单字段
			
    在上一章节我们已经介绍了表的验证规则,我们可以看到"Name", "E-mail", 和 "Gender" 字段是必须的,各字段不能为空.  ...
    
			
    9. 
						
  9. git 创建.gitignore忽略不必要的文件
			
    问题: 创建java项目,使用git提交,有时需要忽略不必要的文件或文件夹,只保留一些基本. 例如maven创建好后,实际开发中我们只需提交:src,.gitignore,pom.xml等文件 但是有 ...
    
			
    10. 
						
  10. Java内功修炼系列一观察者模式
			
    观察者模式又称发布-订阅模式,就是观察者通过订阅被观察者,或关注被观察者,从而实时更新观察者的信息.比如我们玩微博的时候,如果关注了一些博主,那么当博主发动态时,在首页微博列表中就会自动更新这些博主发 ...
    
			
    11.