什么是同源策略？



阮一峰的博客 同源策略 




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


    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. hibernate 映射总结
			
    单向一对多实体配置:在一的实体中设置多的一方SET集合配置文件:在一的一方用set 设置 one to many表配置:多方表的外键指向一方表的主键; 双向一对多实体配置:在一的实体中设置多的一方SE ...
    
			
    2. 
						
  2. Python使用微信接入图灵机器人
			
    1.wxpy库介绍 wxpy 在 itchat 的基础上,通过大量接口优化提升了模块的易用性,并进行丰富的功能扩展. 文档地址:https://wxpy.readthedocs.io 从 PYPI 官 ...
    
			
    3. 
						
  3. rabbit mq 基础流程（转）
			
    从AMQP协议可以看出,MessageQueue.Exchange和Binding构成了AMQP协议的核心,下面我们就围绕这三个主要组件    从应用使用的角度全面的介绍如何利用Rabbit MQ构建 ...
    
			
    4. 
						
  4. python3-常用模块之sys
			
    import syssys 是和Python解释器打交道的sys.argvprint(sys.argv) # argv的第一个参数 是python这个命令后面的值 主要用途 1. 程序员 运维人员 在 ...
    
			
    5. 
						
  5. matlab-选择-循环-函数
			
    1 选择 3 循环 break 3 函数
    
			
    6. 
						
  6. @Restcontroller与@controller区别
			
    @RestController注解相当于@ResponseBody + @Controller合在一起的作用. 1)如果只是使用@RestController注解Controller,则Control ...
    
			
    7. 
						
  7. NOI2018 Day1 归程（return）
			
    第一次参加NOI,当然,我没去现场做,只是在网络同步赛做了而已. 那网站,特别特别卡啊-- 最后只交了第一题,原本认为能AC,但是因为某些原因只有50分. 我这可怜的第一次啊-- 题目 题目点此处下载 ...
    
			
    8. 
						
  8. Elasticsearch系列(二)--query、filter、aggregations
			
    本文基于ES6.4版本,我也是出于学习阶段,对学习内容做个记录,如果文中有错误,请指出. 实验数据: index:book type:novel mappings: { "mappings& ...
    
			
    9. 
						
  9. HZOI20190829模拟33题解
			
    题面:https://www.cnblogs.com/Juve/articles/11436771.html A:春思 我们对a分解质因数,则$a=\prod\limits_p^{p|a}p^k$ 所 ...
    
			
    10. 
						
  10. Python实现十大经典排序算法（史上最简单）
			
    十大排序算法(Python实现)一. 算法介绍及相关概念解读 算法分类十种常见排序算法可以分为两大类: 非线性时间比较类排序:通过比较来决定元素间的相对次序,由于其时间复杂度不能突破O(nlogn), ...
    
			
    11.