同源策略：所谓同源是指，域名，协议，端口相同，它是由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. vue打包后找不到资源路径问题
			
    问题描述: 使用webpack打包vue项目后,前后端联调无法找到资源 解决方案: 一. 改为相对路径,去除axios中地址的第一个“/” onProxyReq: function (proxyReq ...
    
			
    2. 
						
  2. BRD——>MRD——>PRD，产品经理三大文档概念详解及前后逻辑
			
    转自:https://blog.csdn.net/neikutaixiao/article/details/40819445 商业需求文档Business Requirement DocumentBR ...
    
			
    3. 
						
  3. Asp.net Core 微信小程序支付
			
    最近要做一个微信小程序支付的功能 在网上找了一下 .net Core做微信支付的博客 和 demo 几乎没有 自己研究了好几天 参考了 很多 大牛的博客 勉强做出来了  因为参数都没有 比如 opid ...
    
			
    4. 
						
  4. 【uoj#94】【集训队互测2015】胡策的统计（集合幂级数）
			
    题目传送门:http://uoj.ac/problem/94 这是一道集合幂级数的入门题目.我们先考虑求出每个点集的连通生成子图个数,记为$g_S$,再记$h_S$为点集$S$的生成子图个数,容易发现 ...
    
			
    5. 
						
  5. 07_Hive的基本命令_Insert命令
			
    1.将查询结果插入Hive表语法结构: 1.1.基本模式插入: INSERT OVERWRITE TABLE tablename1 [PARTITION (partcol1=val1, partcol ...
    
			
    6. 
						
  6. Linux Centos虚拟机扩容
			
    Linux Centos虚拟机扩容(/dev/mapper/centos-root) 1:.首先查看我们的根分区大小是多少 df -h 文件系统 类型 容量 已用 可用 已用% 挂载点``/dev/m ...
    
			
    7. 
						
  7. 如何在网页标题栏title加入logo(icon)图标？
			
    打开某一个网页会在浏览器的标签栏处显示该网页的标题和图标,当网页被添加到收藏夹或者书签中时也会出现网页的图标,怎么在网页title左边显示网页的logo图标呢? 方法一(被动式): 制作一个ico格式 ...
    
			
    8. 
						
  8. ACM-ICPC 2015 沈阳赛区现场赛 I. Triple && HDU 5517（二维BIT）
			
    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5517 题意:有二元组(a,b),三元组(c,d,e).当b == e时它们能构成(a,c,d)然后,当 ...
    
			
    9. 
						
  9. webstorm 2016.3 注册方法
			
    用license server 的方式吧,activation code 的方式没有找到方法. license server 里写http://idea.iteblog.com/key.php 用li ...
    
			
    10. 
						
  10. UnhandledExceptionPolicy
			
    winform程序未捕获异常解决方法  EventType clr20r3 P1 http://blog.csdn.net/chichaodechao/article/details/8294922
    
			
    11.