Ajax跨域请求 同源策略与Jsonp

同源策略（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">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Title</title>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>

<h3>pro1的首页</h3>

<button class="b2">send a request</button>
<script>

     $(".b2").click(function () {
         $.ajax({
             url:"http://127.0.0.1:8002/ajax_send/",    // 浏览器的同源策略的原因，AJax无法发送跨域请求
             success:function (data) {
                 alert(data)
             }
         })
     });

==================================http://127.0.0.1:8001项目的views
from django.shortcuts import render,HttpResponse

def index(request):

    return render(request,"index.html")

def ajax_send(request):
    return HttpResponse("项目1的数据")

项目2

==================================http://127.0.0.1:8002项目的index
<!DOCTYPE html>
<html lang="en">
<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>
    <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

</head>
<body>

<h3>pro2的首页</h3>
<button class="b2">send a request</button>

<script>
     $(".b2").click(function () {
         $.ajax({
             url:"/ajax_send/",
             success:function (data) {
                 alert(data)
             }
         })
     })
</script>
</body>
</html>

==================================http://127.0.0.1:8002项目的views
from django.shortcuts import render,HttpResponse

def index(request):

    return render(request,"index.html")

def ajax_send(request):
    return HttpResponse("项目2的数据")

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

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

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

Jsonp

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

我们发现通过script标签可以实现跨域请求

<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>

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

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

<button class="b2">send a request</button>

<script>
    function foo(data){
        alert(data)
    }
</script>

<script src="http://127.0.0.1:8002/SendAjax/?callback=foo"></script>

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

def ajax_send(request):

    func=request.GET.get("callback")
    print("func",func)
    print("项目2........")
    res={"name":"alex"}
    import json
    return HttpResponse("%s(‘%s‘)"%(func,json.dumps(res)))

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

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

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

function foo(s) {
       console.log(s);
       JSON.parse(s)
    }

    function kua_yu(url) {
             // 生成   script标签
            var $ele_script=$("<script>");
            $ele_script.attr("src",url);
            $ele_script.attr("class","kuayu");
            // 添加到body中
            $("body").append($ele_script);   // 发送请求
            $(".kuayu").remove()
    }

    $(".b2").click(function () {
         kua_yu( "http://127.0.0.1:8002/ajax_send/?callback=foo")
    });

此处kua_yu函数用来生成script标签，并在生成后再将他删除，防止页面上存在很多无意义的标签，他接收一个url，用来确定请求的路径

当点击按钮后就会调用kua_yu函数，并通过跨域请求返回的数据来调用foo函数，完成数据处理

jQuery对JSONP的实现

getJSON

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

8001的html改为：

//========================基于jquery的API实现跨域请求===================================

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

    $.getJSON("http://127.0.0.1:8002/ajax_send/?callback=?",function (data) {
            console.log(data);
        })
});

jQuery的getJSON在处理callback=?时会生成一个随机的函数名，当数据返回时，会直接调用后面的匿名函数function，里面的data就是我们需要的数据

8002的views不改动。

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

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

$.ajax

8001的html改为：

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

   $.ajax({
       url:‘http://127.0.0.1:8002/ajax_send/‘,
       dataType:"jsonp",
       jsonp: ‘callback‘,
       jsonpCallback:"SayHi"
   });
});

function SayHi(arg){
                alert(arg);
            }

8002的views不改动。

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

<script>

    function f(){

            $.ajax({
               url:"http://127.0.0.1:8002/ajax_send/",
               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>

原文地址：https://www.cnblogs.com/QQ279366/p/8488539.html

时间： 2024-11-10 14:03:26

Ajax跨域请求 同源策略与Jsonp的相关文章

Django之跨域请求同源策略

同源策略: 首先基于安全的原因,浏览器是存在同源策略这个机制的,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. 而如果我们要跳过这个策略,也就是说非要跨域请求,那么就需要通过JSONP或者CORS来实现了. 一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: URL 结果 原因 http://a.xyz.com/dir2/oth

JavaScript之Ajax-7 Ajax跨域请求(Ajax跨域概述、Ajax跨域实现)

一.Ajax跨域概述 同源策略 - 同源策略(Same origin policy)是一种约定,它是浏览器的核心也最最基本的核心.如果少了同源策略,则浏览器的正常功能可能都会收到影响.可以说Web是构建在同源策略基础上的,浏览器只是针对同源策略的一种实现 - 它是由 Netscape 提出的一个著名的安全策略 - 现在所有支持 JavaScript 的浏览器都会使用这个策略 - 所谓同源策略是指,域名.协议.端口相同 域名概述 - 域名(Domain Name) 是由一串用点分隔的名字组成的In

Ajax 跨域请求 jsonp获取json数据

遇到Ajax的跨域请求出问题 找了中解决办法如下: 参考内容:http://justcoding.iteye.com/blog/1366102 由于受到浏览器的限制,该方法不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误.但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办? 理解同源策略 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的

Ajax跨域、Json跨域、Socket跨域和Canvas跨域等同源策略限制的解决方法

同源是指同样的协议.域名.port,三者都同样才属于同域.不符合上述定义的请求,则称为跨域. 相信每一个开发者都曾遇到过跨域请求的情况,尽管情况不一样,但问题的本质都能够归为浏览器出于安全考虑下的同源策略的限制. 跨域的情形有非常多,最常见的有Ajax跨域.Socket跨域和Canvas跨域.以下列举一些我们常见的跨域情形下.某些浏览器控制台给出的错误提示: FireFox下的提示: 已阻止交叉源请求:同源策略不同意读取***上的远程资源.能够将资源移动到同样的域名上或者启用 CORS 来解决问

使用jsonp实现ajax跨域请求

Jsonp(JSON with Padding)是资料格式 json 的一种“使用模式”,可以让网页从别的网域获取资料. 由于同源策略,一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通,而 HTML 的<script> 元素是一个例外.利用 <script> 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 资料,而这种使用模式就是所谓的 JSONP.用 JSONP 抓到的资料并不是 JSON,

jsonp其实很简单【ajax跨域请求】

前两天被问到ajax跨域如何解决,还真被问住了,光知道有个什么jsonp,迷迷糊糊的没有说上来.抱着有问题必须解决的态度,我看了许多资料,原来如此... 为何一直知道jsonp,但一直迷迷糊糊的不明白呢?——网上那些介绍资料都写的太复杂了! 我是能多简单就多简单,争取让你十分钟看完! 1. 同源策略 ajax之所以需要“跨域”,罪魁祸首就是浏览器的同源策略.即,一个页面的ajax只能获取这个页面相同源或者相同域的数据. 如何叫“同源”或者“同域”呢?——协议.域名.端口号都必须相同.例如: ht

ajax跨域请求--jsonp实例

ajax请求代码: //区域事件选择配送点 function changeDistrict(value){ if(value == 0){ $('#transport_node').empty(); $('#transport_node').append('<option value="0">请选择</option>'); return; } $('#transport_node').empty(); $('#transport_node').append('&

ajax 跨域请求之jsonp

需求 遇到的问题 解决办法 需求 今天项目需要访问一个外部链接获取数据,是跨域的.使用ajax 请求一直提示: 遇到的问题 1. 如何使用ajax 跨域请求数据 2. 能不能post请求 解决办法 经过网上查找资料,能使用jsonp请求跨域数据. jsonp请求数据只能get,不支持post跨域请求 使用方法,见代码: $.ajax({ type: "post",//这里写post也没用,也是get请求 url: "url", dataType: "jso

ajax跨域请求学习笔记

前言 ajax,用苍白的话赞扬:很好. 我们可以使用ajax实现异步获取数据,减少服务器运算时间,大大地改善用户体验:我们可以使用ajax实现小系统组合大系统:我们还可以使用ajax实现前端的优化.(好一个排比) 虽然ajax很好,但在使用起来也会有一定的限制,出于安全考虑,不允许跨域通信.如果尝试从不同的域请求数据,会出现安全错误.(下面例子1可以直观看出) 同源策略限制 同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性.也就是说,受到请求的 URL 的域必须与当前 Web 页面