什么是同源策略？



阮一峰的博客 同源策略 




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


    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. LeetCode404Sum of Left Leaves左叶子之和
			
    计算给定二叉树的所有左叶子之和. 示例: 3 / \ 9    20 / \ 15   7 在这个二叉树中,有两个左叶子,分别是 9 和 15,所以返回 24 class Solution { pub ...
    
			
    2. 
						
  2. Kafka在window上安装部署
			
    1.准备工作   ①jdk 具体自行百度安装jdk,配置好 JAVA_HOME和path, 下载地址:   http://www.oracle.com/technetwork/java/javase/ ...
    
			
    3. 
						
  3. vue.js_12_vue的watch和computed
			
    1.watch用来监测指定Vue实例上的数据变动. watch主要用于监控vue实例的变化,它监控的变量当然必须在data里面声明才可以,它可以监控一个变量,也可以是一个对象. 1.>使用wat ...
    
			
    4. 
						
  4. linux php5.4安装phalcon
			
    PHP版本5.6以上,安装可参考.https://blog.csdn.net/happysdh/article/details/51450654 在phalcon3.0以后就不支持php5.4了. 要 ...
    
			
    5. 
						
  5. [群晖] DSM6.2用winscp通过root权限登录
			
    http://www.nas1.cn/thread-86048-1-1.html 以前DSM6.0的时候可以通过改root密码的方式,来通过winscp来登录nas,这样可以获得最高权限可以任意修改文 ...
    
			
    6. 
						
  6. win7安装mysql8提示one more product requirements have not been satisified
			
    点击否 然后查看一下到底缺啥,系统版本不一样,缺少的东西也不一定一样 去微软下就是了https://www.microsoft.com/en-us/download/details.aspx?id=4 ...
    
			
    7. 
						
  7. Windows下shell神器
			
    想找一个可以在Windows平台玩命令行的东西,不想装虚拟机搞linux,所以找到两个神器 如何升级Babun中的Git Babun中默认已经集成Git,只是有可能不是最新的版本 如果只是更新Babu ...
    
			
    8. 
						
  8. IO流 复制文件及文件夹
			
    package io; import java.io.File; import java.io.FileInputStream; import java.io.FileOutputStream; im ...
    
			
    9. 
						
  9. docker和宿主机之间复制文件
			
    从主机复制到容器sudo docker cp host_path containerID:container_path 从容器复制到主机sudo docker cp containerID:conta ...
    
			
    10. 
						
  10. 两周的业余时间，写了个简单的shell
			
    Linux下的,环境是 Fedora 实现了基本的内部命令功能,及比较完善的内部命令框架. 类似于MFC消息映射表的方式,写完一个内部命令,只需要向这个头文件中,导入一个头文件,再写入命令处理函数,就 ...
    
			
    11.