什么是同源策略？



阮一峰的博客 同源策略 




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


    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. 删除文件夹时提示“You need permission to perform this action。。。”，如何解决？
			
    Win10系统,有时,要删除某个文件夹,却提示“You need permission to perform this action...” 以下是我Google之后找到的解决方案 1.创建一个文本文 ...
    
			
    2. 
						
  2. 在scrapy中过滤重复的数据
			
    当为了确保爬到的数据中没有重复的数据的时候,可以实现一个去重的item pipeline 增加构造器方法,在其中初始化用于对与书名的去重的集合 在process_item方法中,先取出item中要判断 ...
    
			
    3. 
						
  3. line-height影响排版
			
    父级div设置了line-height值,子级div会继承line-height.如果不想子级元素继承,给子级元素设置line-height:normal.
    
			
    4. 
						
  4. Free- Linux必学的60个命令
			
    1.作用 free命令用来显示内存的使用情况,使用权限是所有用户. 2.格式 free [-b|-k|-m] [-o] [-s delay] [-t] [-V] 3.主要参数 -b -k -m:分别以 ...
    
			
    5. 
						
  5. [JLOI2015]战争调度【暴力+树形Dp】
			
    Online Judge:Bzoj4007,Luogu P3262 Label:暴力,树形Dp 题解 参考了这篇blog https://www.cnblogs.com/GXZlegend/p/830 ...
    
			
    6. 
						
  6. utils01_git的使用
			
    1.git和的安装 下载git https://www.git-scm.com/download/ 完全下一步安装git和TortoiseGit和TortoiseGit的汉化包 2.右击选中小乌龟点击 ...
    
			
    7. 
						
  7. jaxFileUpload插件异步上传图片
			
    第一步:引入jquery文件和jaxFileUpload文件 文件位置:https://pan.baidu.com/s/1jHEyIyy 第二步,前端: <div class="for ...
    
			
    8. 
						
  8. 【DM8168学习笔记4】ezsdk安装过程记录
			
    安装文件 ezsdk_dm816x-evm_5_05_02_00_setuplinux DM8168-EZSDK文件结构如图所示.               (图片来自:http://process ...
    
			
    9. 
						
  9. 《DSP using MATLAB》Problem 7.34
			
    代码: %% ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ %% Output In ...
    
			
    10. 
						
  10. JSP - (Java Server Pages) - Java服务器界面
			
    JSP简介: 在HTML中嵌入Java脚本代码,由应用服务器中的JSP引擎来编译和执行嵌入的Java脚本代码,然后将生成的整个页面信息返回给客户端: 一个JSP页面包含:静态内容(HTML静态文本), ...
    
			
    11.