同源策略:

同源策略(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:8002/SendAjax/",

            type:"POST",

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

            success:function(data){

                alert(123);

                alert(data);

            }

        })

    })

</script>

</body>

</html>

项目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":"man","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):    # 不校验csrf_token

    import json

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

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

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

如何解决同源策略实现跨域请求

使用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:8002/SendAjax/"></script>

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

from django.views.decorators.csrf import csrf_exempt

@csrf_exempt

def SendAjax(request):

    import json

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

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

使用jsonp来实现跨域请求

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

<button class="get_index" onclick=f()>洗剪吹</button>

<srcipt>

function ret(arg) {
　　console.log(arg)
}

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

             $.ajax({

                 url:"http://127.0.0.1:8002/index/",

                 type:"get",

                 dataType:"jsonp",     // 伪造ajax  基于script

                 jsonp: 'callbacks',

                 //jsonpCallback:"ret",

                 success:function (data) {

                     console.log(data)

                 }

             })

         })

</srcipt>

=================127.0.0.1:8002/index====

def index(request):  # jsonp

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

    # print("func",func)

    info={"name":"man","age":34,"price":200}

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

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

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

jsonp应用

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

         $.ajax({

             url:"http://www.jxntv.cn/data/jmd-jxtv2.html",

             type:"get",

             dataType:"jsonp",     // 伪造ajax  基于script

             jsonp: 'callbacks',

             jsonpCallback:"list",

             success:function (data) {

                 //console.log(data.data);

                 var html="";

                 $.each(data.data,function (index,weekday) {

                 console.log(weekday);     // {week: "周一", list: Array(19)}

                 html+='<p>'+weekday.week+'</p>';

                 $.each(weekday.list,function (j,show) {

                        html+= '<p><a href='+show.link+'>'+show.name+'</a></p>'

                     })

                 });

                 $("body").append(html)

             }

         })

        })

使用cors来实现跨域请求

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

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

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

============127.0.0.1:8001=====

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

             $.ajax({

             url:"http://127.0.0.1:8008/service/",

             success:function (data) {

                 console.log(data)

             }

         })

        })

==============127.0.0.1:8002======

    def service(request):

        info = {"k1":"v1","k2":"v2"}

        responce = HttpResponce(json.dumps(info))

        responce["Access-Control-Allow-Origin"] = "http://127.0.0.1:8001"

        responce["Access-Control-Allow-Origin"] = "*"      #表示所有访问通过

        return responce

同源策略jsonp和cors的更多相关文章

Django 之Ajax&Json&CORS&同源策略&Jsonp用法
什么是Json 定义: JSON(JavaScript Object Notation, JS 对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript (w3c制定的js规范)的一个子集 ...
同源策略 - JSONP - CORS
1. Jquery 对象可以通过 .index() 进行取出自当前元素在父级元素中存放的索引: 2. 浏览器的同源策略 -- Ajax 在访问非本网站的时候,在数据返回的时候,会被浏览器拦截 - 后 ...
同源策略 & 高效调试CORS实现
# 目录为什么有同源策略? 需要解决的问题 CORS跨域请求方案 preflight withCredentials 附:高效.优雅地调试CORS实现 ----------------------- ...
Cross-origin resource sharing JSON with Padding 同源策略 JSONP 为什么form表单提交没有跨域问题，但ajax提交有跨域问题？ XMLHttpRequest and the Fetch API follow the same-origin policy 预检请求（preflight request）
https://zh.wikipedia.org/wiki/跨来源资源共享跨来源资源共享(CORS)是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略[1 ...
[oldboy-django][2深入django]浏览器同源策略 + JSONP + cros
浏览器的同源策略: - 同源: 同方法,同域名,同端口 http://www.baidu.com:8000 http: 方法 www.baidu.com: 域名 8000: 端口 - 定义网上解析非 ...
Apache2 同源策略解决方案 - 配置 CORS
什么是同源策略现在的浏览器大多配有同源策略(Same-Origin Policy),具体表现如下: 浏览某一网站,例如 http://www.decembercafe.org/.这个网页中的 Aja ...
同源策略 JSONP（实践篇）
JSONP详解 json相信大家都用的多,jsonp我就一直没有机会用到,但也经常看到,只知道是“用来跨域的”,一直不知道具体是个什么东西.今天总算搞明白了.下面一步步来搞清楚jsonp是个什么玩意. ...
[CORS：跨域资源共享] 同源策略与JSONP
Web API普遍采用面向资源的REST架构,将浏览器最终执行上下文的JavaScript应用Web API消费者的重要组成部分."同源策略"限制了JavaScript的跨站点调用 ...
关于安全性问题：（XSS,csrf,cors,jsonp,同源策略）
关于安全性问题:(XSS,csrf,cors,jsonp,同源策略) Ajax 是无需刷新页面就能从服务器获取数据的一种方法.它的核心对象是XHR,同源策略是ajax的一种约束,它为通信设置了相同的协 ...

随机推荐

【BZOJ5506】[GXOI/GZOI2019]旅行者（最短路）
[BZOJ5506][GXOI/GZOI2019]旅行者(最短路) 题面 BZOJ 洛谷题解正着做一遍\(dij\)求出最短路径以及从谁转移过来的,反过来做一遍,如果两个点不由同一个点转移过来就更 ...
洛谷 P3380 【【模板】二逼平衡树（树套树）】
其实比想象中的好理解啊所谓树套树,就是在一棵树的基础上,每一个节点再维护一棵树说白了,就是为了实现自己想要的操作和优秀的时间复杂度,来人为的增加一些毒瘤数据结构来维护一些什么东西比如说这道题如 ...
集成Tomcat环境到Eclipse中
集成Tomcat环境到Eclipse中作者:尹正杰版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.安装Eclipse环境 1>.安装JDK环境官方地址:https://www.or ...
saltstack主机管理项目：今日总结（六）
一.总目录二.具体代码 salt #!/usr/bin/env python # -*- coding:utf-8 -*- # Author:luoahong import os,sys if __ ...
HTML/CSS: 如何制作未读信息图标
最近公司项目中涉及到制作通讯界面中未读信息的带数字的红色圆点图标. 拿我目前的博客头像图片为例(其实就是谷歌图片中粗略挑了一张顺眼的图片),效果图如下: HTML代码如下: <img id=&q ...
react实战项目开发(1) 搭建react开发环境初始化项目（Create-react-app）
前言 Create React App npm install -g create-react-app create-react-app my-app cd my-app npm start 执行命令 ...
DevExpress设置默认皮肤及各种皮肤样式
DevExpress设置默认皮肤及各种皮肤样式设置默认皮肤代码: 在程序入口Program.cs里添加如下代码引用using DevExpress.LookAndFeel; UserLookAnd ...
Hello jna
记录下这几天用jna3.5.0调c++写的dll的经历 os:win7 用jna调dll首先需要一个dll文件并有可调的方法,然后根据方法的名称,参数,返回值编写一个interface c++需要包含 ...
Django对于模型的数据操作
一.引入模型的包 from myApp.models import Grades,Students 二.查询所有数据 #objecs是类的隐藏属性:类名.objects.all()可以查询所有数据 G ...
本地ssh设置多个git项目访问
前因: 自己本地的~/.ssh里原本有个id_rsa,到了公司后新的git项目配置后,把自己原有的文件覆盖了,导致github和公司的项目我只能选一个,郁闷,怎么区分开呢? 大致逻辑是新生成一对密钥文 ...

同源策略jsonp和cors