同源策略：所谓同源是指，域名，协议，端口相同，它是由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. sql server 查看表中某一字段的排序规则
			
    SELECT o.name,o.object_id,c.name,c.column_id,c.collation_name   FROM sys.columns c      JOIN sys.obj ...
    
			
    2. 
						
  2. 如何上传HTML5应用到SAP云平台的Cloud Foundry环境下
			
    先使用WebIDE创建一个HTML5应用.New->Project from Template: 从可选模板里选择SAPUI5 Application: 创建一个HTML5 Module,取名为 ...
    
			
    3. 
						
  3. List集合复制
			
    方法一: public static void main(String[] args) { // TODO Auto-generated method stub List<String>  ...
    
			
    4. 
						
  4. str 文本函数的调用
			
    方法 说明 S.isdigit() 判断字符串中的字符是否全为数字 S.isalpha() 判断字符串是否全为英文字母 S.islower() 判断字符串所有字符是否全为小写英文字母 S.isuppe ...
    
			
    5. 
						
  5. 如何自动运行loadrunner脚本
			
    问题背景 在凌晨之后,自然流量比较低,无需人值守的情况自动运行loadruner脚本. 实现思路 windows定时任务+BAT脚本 BAT脚本: SET M_ROOT=C:\Program File ...
    
			
    6. 
						
  6. gitbook 准备一 [python3 WSGI 初探]
			
    目录 1.wsgi服务样例 2.请求样例 1.wsgi服务样例 # 官网样例 from wsgiref.util import setup_testing_defaults from wsgiref. ...
    
			
    7. 
						
  7. 集合篇-----ArrayList与LinkedList之间的那些小事
			
    各自特性: ArrayList  : 是一由连续的内存块组成的数组,范围大小可变的,当不够时增加为原来1.5倍大小,数组. :调用trimToSize方法,使得存储区域的大小调整为当前元素数量所需要的 ...
    
			
    8. 
						
  8. redis，windows设置记录
			
    windows下载 github地址 : https://github.com/MicrosoftArchive/redis/releases #设置内存 redis-server.exe redis ...
    
			
    9. 
						
  9. Zabbix trigger（触发器）设置
			
    设置一个监控项–进站包数,当进站包数>50触发器报警. 先设置一个进站包数的监控项(item):
    
			
    10. 
						
  10. 【Wince-禁止重复启动程序】Wince 不重复启动程序
			
    创建类Mutex.cs: using System; using System.Linq; using System.Collections.Generic; using System.Text; u ...
    
			
    11.