同源策略：所谓同源是指，域名，协议，端口相同，它是由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. try,except,finally的用法
			
    try,except,finally try...except形式:指定一个或多个异常处理器(异常子句).. 当在try子句中没有异常发生时,,异常处理器将不被执行. 当在try子句中有异常发生时,首 ...
    
			
    2. 
						
  2. Tomcat 输出日志出现中文乱码
			
    Tomcat 输出日志出现中文乱码 解决方案: 打开到tomcat安装目录下的conf/文件夹 修改logging.properties文件,找到 java.util.logging.ConsoleH ...
    
			
    3. 
						
  3. AJAX—JSON和Django内置序列化
			
    JSON 什么是JSON JSON 指的是 JavaScript 对象表示法(JavaScript Object Notation) JSON 是轻量级的文本数据交换格式 JSON 独立于语言 * J ...
    
			
    4. 
						
  4. AJAX配置csrf
			
    // 从COokie取CSRF TOKEN的值 function getCookie(name) { var cookieValue = null; if (document.cookie & ...
    
			
    5. 
						
  5. kubernetes容易混淆的几个端口
			
    k8s服务的配置文件中几个端口参数,nodePort.port.targetPort,刚开始的时候不理解什么意思很容易混淆写错,这里总结一下,概括来说就是nodePort和port都是k8s的serv ...
    
			
    6. 
						
  6. 02_Hive安装简介
			
    1.下载Hive安装包: 官网下载:http://hive.apache.org/downloads.html 百度云分享:https://pan.baidu.com/s/1M4LmdOXaq6T-P ...
    
			
    7. 
						
  7. iview 如何在表格中给操作图标添加Tooltip文字提示?
			
    项目需要用到的iview 表格中操作项目有各种各样的图标,而各种各样的图标代表不同的操作,面对新用户可能很懵,那如何给这些图标添加Tooltip文字提示? 废话不多讲,直接看代码: <templ ...
    
			
    8. 
						
  8. python+Appium自动化：H5元素定位
			
    问题思考 在混合开发的App中,经常会有内嵌的H5页面.那么这些H5页面元素该如何进行定位操作呢? 解决思路 针对这种场景直接使用前面所讲的方法来进行定位是行不通的,因为前面的都是基于Andriod原 ...
    
			
    9. 
						
  9. Spring源码解读（一）
			
    前期准备 首先搭建一个简单的Spring Demo工程 项目目录结构如下图所示: applicationContect.xml (可以取其他文件名,只要在加载配置文件时指定文件路径) <?xml ...
    
			
    10. 
						
  10. JAVA遇见HTML——JSP篇（案例项目）
			
    
			
    11.