同源策略：所谓同源是指，域名，协议，端口相同，它是由Netscape提出的一个著名的安全策略，现在所有支持JavaScript 的浏览器都会使用这个策略。当浏览器同时打开两个tab页面（两个不同服务器提供），tab1页面发送请求时，浏览器会检测是否是向tab1的服务器发出请求，若是向tab2的服务器发出的请求会报错。如下面的示例代码，index.html 运行在 http://127.0.0.1:8001服务器上，向另一个服务器http://127.0.0.1:8002/cos_service 发送ajax请求，浏览器控制台出现错误提示：同源策略禁止读取位于 http://127.0.0.1:8002/cos_service/ 的远程资源。（原因：CORS 请求未能成功）,  为了实现这种跨域请求，可以利用CORS和jsonp.

index.html     ( http://127.0.0.1:8001/index.html)

<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

<p>跨域请求jsonpdemo2项目中的视图</p>

<button onclick="send();">请求</button>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>

function send() {

        $.ajax({

            url:'http://127.0.0.1:8002/cos_service/',

type: 'get',

success:function(data) {

            console.log(data);

}}

        );

}

</script>

</body>

</html>

1. CORS ( Cross-origin resource sharing ) 跨域资源共享

　　对于上面的请求，只需在http://127.0.0.1:8002/cos_service/的视图函数的返回请求头中设置Access-Control-Allow-Origin=访问的域名，此处为http://127.0.0.1:8001，代码如下：

views.py    （ http://127.0.0.1:8002/）

def cos_service(request):

　　info={"name":"小明","age":24}

   response = HttpResponse(json.dumps(info))

   response['access-control-allow-origin']='http://127.0.0.1:8001'

　　# response['access-control-allow-origin'] = '*'     #对所有客服端请求

　　return response


相关知识：


　　浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request）。


　　只要同时满足以下两大条件，就属于简单请求


　　（1) 请求方法是以下三种方法之一：
   　　　　  HEAD
     　　　　GET
    　　　　 POST
 　　（2）HTTP的头信息不超出以下几种字段：
  　　　　   Accept
  　　　　   Accept-Language
     　　　　Content-Language
    　　　　 Last-Event-ID
    　　　　 Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain


　　*简单请求和非简单请求的区别？


　　　　简单请求：一次请求
    　　　　非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。
 　　* 关于“预检”


　　　　- 请求方式：OPTIONS
 　　　　- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
 　　- 如何“预检”
      　　　　=> 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
         　　Access-Control-Request-Method
     　　　　 => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        　　 Access-Control-Request-Headers


　　支持跨域，简单请求


　　　　服务器设置响应头：Access-Control-Allow-Origin = '域名' 或 '*'


　　支持跨域，复杂请求


　　由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。


  • “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
    • 

  • “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers


2. jsonp实现 (json + padding)


　　jsonp主要利用script标签中src的跨域请求，需要前后端的配合实现，设置相同函数名称。对于上面 http://127.0.0.1:8001/ 上的前端页面index.html，ajax请求中设置参数jsonp：callback，并定义相应的function callback（）函数，在 http://127.0.0.1:8002/的视图函数views.py的返回内容中内嵌相同的函数名称，即字符窜“callback（）”。 具体代码如下：


　　(注意：ajax请求跨域url为：http://127.0.0.1:8002/service， 设置成https://127.0.0.1:8002/service会出错，服务器不会响应)


index.html     (http://127.0.0.1:8001/)




<!DOCTYPE html>

<html lang="zh-CN">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Title</title>

</head>

<body>

<p>跨域请求jsonpdemo2项目中的视图</p>

<button onclick="send();">请求</button>

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>

<script>

     function callable(arg){

         console.log(arg);

    }

</script>

<script>

    function send() {

        $.ajax({

            url:'http://127.0.0.1:8002/service/',

            type: 'get',

            dataType:'jsonp',     //未加jsonp时控制台显示：同源策略禁止读取位于 http://127.0.0.1:8002/service/ 的远程资源。（原因：CORS 请求未能成功）

            jsonp:'callable',

            success:function(data) {

        }}

        );




views.py  ( http://127.0.0.1:8002/)




def service(request):

    print 'service'

    data ='参数'

    info={"name":"小明","age":24}

    # return HttpResponse("callable('%s')"%data)

    return HttpResponse("callable('%s')" %json.dumps(info))




　　上面的ajax请求中dataType:'jsonp', 伪造script的src请求，类似于下面的代码，将上面的index.html 换为下面代码时能达到相同的功能。




<script>

     function callable(arg){

        console.log(arg);

    }

</script>

<script src="http://127.0.0.1:8002/service/"></script> <!--https://时不会返回结果,另外script标签必须放在传回函数的下方，否则找不到-->

<script>




相关参考博客：http://www.cnblogs.com/yuanchenqi/articles/7638956.html#_label6


https://www.cnblogs.com/keyi/p/6726089.html
												


											
CORS和jsonp实现跨域请求的更多相关文章
	

    
						
  1. Nginx反向代理、CORS、JSONP等跨域请求解决方法总结
		
    由于 Javascript 同源策略的存在使得一个源中加载来自其它源中资源的行为受到了限制.即会出现跨域请求禁止. 通俗一点说就是如果存在协议.域名.端口或者子域名不同服务端,或一者为IP地址,一者为 ...
    
		
    2. 
								
  2. 关于使用Jsonp做跨域请求
		
    今天在使用Jsonp做跨域请求的练习时碰上这样一个问题 代码如下 <!DOCTYPE html> <html> <head> <meta charset=&q ...
    
		
    3. 
						
  3. 使用jsonp进行跨域请求
		
    使用jsonp进行跨域请求 在实际的业务中很多时候需要用到跨域请求,然而jsonp为我们提供了一种非常方便的跨域请求的方式,具体实现代码如下: $.ajax({ type:"get" ...
    
		
    4. 
						
  4. 利用JSONP实现跨域请求
		
    前言:有时候一忙起来就没了时间观念,原来我已经有十多天没写博客了.一直想做跨域方面的尝试,无奈最近准备校招没时间动动手.今天就先讲讲JSONP吧,昨晚还在研究QQ空间日志里面网络图片的问题呢,我发现日 ...
    
		
    5. 
						
  5. 来说说SpringMVC + JSONP的跨域请求
		
    先来说说场景,JSON,这货大家应该都懂,不懂的请自动面壁思过,那么什么是JSONP,不是JSON放了个P就叫JSONP,而是JSON with Padding,在进行跨域请求的时候需要的数据,什么是 ...
    
		
    6. 
						
  6. mvc中使用jsonp进行跨域请求详细说明
		
    在web开发中,如果你要在不同域下进行数据异步请求,会出现一个No ‘Access-Control-Allow-Origin’ header is present on the requested r ...
    
		
    7. 
						
  7. 通过 JSONP 实现跨域请求
		
    优质参考资料:https://www.cnblogs.com/chiangchou/p/jsonp.html https://blog.csdn.net/hansexploration/article ...
    
		
    8. 
						
  8. jsonp原理,跨域请求头处理
		
    一.jsonp(解决跨域)思路介绍: 因浏览器的同源策略不会拦截link标签内的src请求,所以利用这一点,我们把后端开放的接口路径放在src内, 其在发送请求后会自动接收返回的东西,所以我们可以给要 ...
    
		
    9. 
						
  9. 不用jsonp实现跨域请求
		
    这几天要用到跨域请求,我在网上找了好多资料,最后自己研究出来一个比较简单方便的, 请求的过程和jquery普通的ajax一样.我用的是.net平台 ,IIS7.5 来看一下后台的代码,我是用MVC的C ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. BigDecimal与Long、int之间的相互转换
			
    //bigDecimal 转换成 Long类型 public static Long bigDecimalToLong(BigDecimal b){ BigDecimal c = new BigDec ...
    
			
    2. 
						
  2. 修正Calendar的Bug
			
    procedure TAndroidNativeCalendarListener.onSelectedDayChange(view: JCalendarView; year, month, dayOf ...
    
			
    3. 
						
  3. 关于百度Tongji Api的文档补充
			
    百度统计的Tongji Api好像没有人维护了,文档缺胳膊少腿也没人理. 今天在这里指出其中一点,因为这一点花时间也没有傻思考的乐趣的. 引用自百度Tongji API文档 这个文档缺了很多东西,其中 ...
    
			
    4. 
						
  4. 【1】Git基础
			
    一.Git概念 1.1.Git定义   Git 是一个开源的分布式版本控制系统,用于敏捷高效地处理任何或小或大的项目.Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发 ...
    
			
    5. 
						
  5. 2019年C题  视觉情报信息分析
			
    2019 年第十六届中国研究生数学建模竞赛C 题 任务1中 图三:图3 中拍照者距离地面的高度 目录: 0.试题分析: 1.构建摄像机模型 2.摄像机参数假定 3.像平面坐标计算 4.图像标定及数值测 ...
    
			
    6. 
						
  6. ListSetAndMap
			
    package com.collection.test; import java.util.ArrayList; import java.util.HashMap; import java.util. ...
    
			
    7. 
						
  7. set调用add报错:
			
    Map<String, String> goodsStandMap = new HashMap<>();goodsStandMap.put("key1",  ...
    
			
    8. 
						
  8. tensorflow 更新出现HTTPSConnectionPool(host='files.pythonhosted.org', port=443): Read timed out.
			
    pip install --upgrade tensorflow --default-timeout=1000
    
			
    9. 
						
  9. dockerfile-maven plugin自动镜像制作并发布
			
    环境准备:win10+docker 1.打开hyper-v 2.下载最新版本docker:https://store.docker.com/editions/community/docker-ce-d ...
    
			
    10. 
						
  10. e.target.value和this的区别
			
    1.e.target.value获取的就是你选择接受事件的元素输入的或者选择的值. 参数e接收事件对象. 而事件对象也有很多属性和方法,其中target属性是获取触发事件对象的目标,也就是绑定事件的元 ...
    
			
    11.