同源策略

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

示例：

项目1:

==================================http://127.0.0.1:8001项目的index

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<button>ajax</button>

{% csrf_token %}

<script>

    $("button").click(function(){

        $.ajax({

            url:"http://127.0.0.1:7766/SendAjax/",

            type:"POST",

            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},

            success:function(data){

                alert();

                alert(data)

            }

        })

    })

</script>

</body>

</html>

==================================http://127.0.0.1:8001项目的views

def index(request):

    return render(request,"index.html")

def ajax(request):

    import json

    print(request.POST,"+++++++++++")

    return HttpResponse(json.dumps("hello"))

项目2:

==================================http://127.0.0.1:8002项目的index

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<button>sendAjax</button>

{% csrf_token %}

<script>

    $("button").click(function(){

        $.ajax({

            url:"/SendAjax/",

            type:"POST",

            data:{"username":"yuan","csrfmiddlewaretoken":$("[name='csrfmiddlewaretoken']").val()},

            success:function(data){

                alert(data)

            }

        })

    })

</script>

</body>

</html>

==================================http://127.0.0.1:8002项目的views

def index(request):

    return render(request,"index.html")

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt

def SendAjax(request):

    import json

    print("++++++++")

    return HttpResponse(json.dumps("hello2"))

当点击项目1的按钮时，发送了请求，但是会发现报错如下：

已拦截跨源请求：同源策略禁止读取位于 http://127.0.0.1:7766/SendAjax/ 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。

但是注意，项目2中的访问已经发生了，说明是浏览器对非同源请求返回的结果做了拦截。

Jsonp

jsonp是json用来跨域的一个东西。原理是通过script标签的跨域特性来绕过同源策略。

思考：这算怎么回事？

1	`<script src="http://code.jquery.com/jquery-latest.js"></script>`

借助script标签，实现跨域请求，示例：

# =============================http://127.0.0.1:8001/index

<button>ajax</button>

{% csrf_token %}

<script>

    function func(name){

        alert(name)

    }

</script>

<script src="http://127.0.0.1:7766/SendAjax/"></script>

# =============================http://127.0.0.1:8002/

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt

def SendAjax(request):

    import json

    print("++++++++")

    # dic={"k1":"v1"}

    return HttpResponse("func('yuan')")  # return HttpResponse("func('%s')"%json.dumps(dic))

这其实就是JSONP的简单实现模式，或者说是JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。

一般情况下，我们希望这个script标签能够动态的调用，而不是像上面因为固定在html里面所以没等页面显示就执行了，很不灵活。我们可以通过javascript动态的创建script标签，这样我们就可以灵活调用远程服务了。

<button onclick="f()">sendAjax</button>

<script>

    function addScriptTag(src){

         var script = document.createElement('script');

         script.setAttribute("type","text/javascript");

         script.src = src;

         document.body.appendChild(script);

         document.body.removeChild(script);

    }

    function func(name){

        alert("hello"+name)

    }

    function f(){

         addScriptTag("http://127.0.0.1:7766/SendAjax/")

    }

</script>

为了更加灵活，现在将你自己在客户端定义的回调函数的函数名传送给服务端，服务端则会返回以你定义的回调函数名的方法，将获取的json数据传入这个方法完成回调：

将8001的f()改写为：

function f(){

addScriptTag("http://127.0.0.1:7766/SendAjax/?callbacks=func")

}

8002的views改为：

def SendAjax(request):

import json

dic={"k1":"v1"}

print("callbacks:",request.GET.get("callbacks"))

callbacks=request.GET.get("callbacks")

return HttpResponse("%s('%s')"%(callbacks,json.dumps(dic)))

jQuery对JSONP的实现

getJSON

jQuery框架也当然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法

8001的html改为：

<button onclick="f()">sendAjax</button>

<script>

    function f(){

          $.getJSON("http://127.0.0.1:7766/SendAjax/?callbacks=?",function(arg){

            alert("hello"+arg)

        });

    }

</script>

8002的views不改动。

结果是一样的，要注意的是在url的后面必须添加一个callback参数，这样getJSON方法才会知道是用JSONP方式去访问服务，callback后面的那个问号是内部自动生成的一个回调函数名。

此外，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名该怎么办呢？我们可以使用$.ajax方法来实现

$.ajax

8001的html改为：

<script>

    function f(){

          $.ajax({

                url:"http://127.0.0.1:7766/SendAjax/",

                dataType:"jsonp",

                jsonp: 'callbacks',

                jsonpCallback:"SayHi"

           });

       }

    function SayHi(arg){

                alert(arg);

            }

</script>

8002的views不改动。

当然，最简单的形式还是通过回调函数来处理：

<script>

    function f(){

            $.ajax({

               url:"http://127.0.0.1:7766/SendAjax/",

               dataType:"jsonp",            //必须有，告诉server，这次访问要的是一个jsonp的结果。

               jsonp: 'callbacks',          //jQuery帮助随机生成的：callbacks="wner"

               success:function(data){

                   alert("hi "+data)

              }

         });

       }

</script>

jsonp: 'callbacks'就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名'SayHi'，server端接受callback键对应值后就可以在其中填充数据打包返回了;

jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。　　

注意 JSONP一定是GET请求

应用

<input type="button" onclick="AjaxRequest()" value="跨域Ajax" />

<div id="container"></div>

    <script type="text/javascript">

        function AjaxRequest() {

            $.ajax({

                url: 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403',

                type: 'GET',

                dataType: 'jsonp',

                jsonp: 'callback',

                jsonpCallback: 'list',

                success: function (data) {

                    $.each(data.data,function(i){

                        var item = data.data[i];

                        var str = "<p>"+ item.week +"</p>";

                        $('#container').append(str);

                        $.each(item.list,function(j){

                            var temp = "<a href='" + item.list[j].link +"'>" + item.list[j].name +" </a><br/>";

                            $('#container').append(temp);

                        });

                        $('#container').append("<hr/>");

                    })

                }

            });

        }

</script>

回到顶部

CORS

一、简介

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

二、两种请求

浏览器将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

第十九篇同源策略与Jsonp的更多相关文章

[CORS：跨域资源共享] 同源策略与JSONP
Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...
Python之路【第十九篇】：爬虫
Python之路[第十九篇]:爬虫网络爬虫(又被称为网页蜘蛛,网络机器人,在FOAF社区中间,更经常的称为网页追逐者),是一种按照一定的规则,自动地抓取万维网信息的程序或者脚本.另外一些不常使用 ...
同源策略与JSONP
[CORS:跨域资源共享] 同源策略与JSONP Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分.“同源策略”限制了J ...
同源策略与 JSONP CORS
同源策略与 JSONP CORS 同源策略同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以 ...
Egret入门学习日记 --- 第十九篇（书中 8.8~8.10 节内容）
第十九篇(书中 8.8~8.10 节内容) 开始 8.8节. 重点: 1.类型推断. 2.类型强制转换,使其拥有代码提示功能. 3.除了TS自带的类型判断,Egret官方也提供了类型判断的方法. 操 ...
同源策略和Jsonp、CORS
一.同源策略同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之 ...
同源策略和JSONP（概念性）
同源策略浏览器有一个很重要的概念——同源策略(Same-Origin Policy). 所谓同源是指,域名,协议,端口相同.不同源的客户端脚本(javascript.ActionScript)在没明 ...
Ajax跨域请求同源策略与Jsonp
同源策略同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源策略基础之上的 ...
javascript 同源策略和 JSONP 的工作原理
同源策略同源策略是一个约定,该约定阻止当前脚本获取或操作另一域的内容.同源是指:域名.协议.端口号都相同. 简单地说,A 服务器下的 a 端口执行 ajax 程序,不能获取 B 服务器或者 A 服务 ...

随机推荐

layer 点击yes后在回调函数里获取layer.open({})iframe里面元素
参考:http://fly.layui.com/jie/19690/ yes: function(index, layero) { uid.value = $(layero).find('iframe ...
Linux --xrandr command
Source: https://www.x.org/archive/current/doc/man/man1/xrandr.1.xhtml https://blog.csdn.net/syh_486_ ...
java第二次课件课后动手动脑习题整理总结（2019年9月23号）
一.动手动脑 1 1.题目 2.程序源代码 package yang8; import java.util.Scanner; import java.util.Random; public class ...
JS控制输入框和文本框字数
文本框限制字数: HTML结构: JS: $('.advert-title').each(function(){ var TXTlength = $(this).text().length; // 当 ...
JavaSwing标准对话框
package test001; import java.awt.event.ActionEvent; import java.awt.event.ActionListener; import jav ...
IDEA spring mvc整合mybatis
准备工作 IDEA 2019.3.1 MySql 8.0.17 Tomcat 7.0.9 开始步骤一.创建一个项目,添加Web支持点击菜单:File->NEW->Project 选择左 ...
开通博客第一天写一个hello world
申请的博客第一天便被批准了,有了一个和大家交流学习的园地.在今后的日子里期待一起进步.
php注册与登录
一.注册 1.注册界面 <!DOCTYPE html><html lang="en"><head> <meta charset=" ...
图解IDEA中配置Maven并创建Maven的Web工程
打开IDEA,File->Settings,如下图所示: 2.在Settings中按照如下进行配置,如下图所示:
Redis的下载与安装
1). 从官网上下载Redis的压缩包 2). 将压缩包解压到某个指定的文件目录中 tar -xzvf redis-4.0.9.tar.gz /xx/xx/xx_dir 3 ...

第十九篇 同源策略与Jsonp