Ajax之跨域请求

  一、引子

  我现在开启了两个django项目,分别叫Demo1和Demo2,Demo1中有一个路径‘http://127.0.0.1:8000/index/’,对应的视图是index视图返回一个index页面,页面中只有一个button按钮,按钮绑定了一个单击事件,点击之后会发送一个ajax请求,请求的路径为‘http://127.0.0.1:8001/ajax/’,Demo1的ip和端口号是:‘http://127.0.0.1:8000/’,Demo2的ip和端口号是:‘http://127.0.0.1:8001/’。前面一段描述就是在Demo1项目的一个页面向Demo2项目发送一个ajax请求,在Demo2有对应的路径和视图来处理请求,并返回值。我们运行一下。报错如下:

  这就是一个已拦截的跨域请求的错误,错误内容是CORS头少“Access-Control-Allow-Origin”。这就是我们用ajax发送一个跨域请求出现的错误,这就是今天我要处理的一个问题。

  二、同源策略

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

同源策略,它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript的浏览器都会用这个策略。所谓的同源,即指:域名、端口、协议同时相同。比如说你用ajax发请求时,会检查你发送的请求是否发送路径是否ajax所在的JavaScript属于同源,即是两者的ip、端口、协议相同。如果不是同源,浏览器就会报错,提示拒绝访问。

  想要实现用ajax发送跨域请求有两种方式,一是jsonp,而是cors。

  三、基于JSONP的ajax跨域请求

  1,版本1

  我们在用script引入js代码,有时用的是网上路径,意思就是在我们的项目去请求其他项目的,如:

  这种情况下是可以请求成功的,于是,我们可以运用这一功能,给button按钮绑定事件,事件的功能是创建一个script标签,然后添加到页面上,这样当我们点击button按钮就会发送一个跨域请求,而且还是允许的。

  Demo1项目index.html页面上添加js代码:

function get_ele_script(url){
            var ele_script=$(‘<script>‘);
            ele_script.attr(‘src‘,url);
            ele_script.attr(‘id‘,‘ele_script‘);
            $(‘body‘).append(ele_script);
            $(‘#ele_script‘).remove()
        }
 $(‘.cli‘).click(function () {
            get_ele_script(‘http://127.0.0.1:8001/ajax/‘)
        })

  这样就成功用点击事件发送了一个跨域请求,在Demo2的视图中,有返回值,但如果我不定义返回的值,HTML文件就会报没有定义的错误,而且视图返回的值在前端页面是以变量的形式显示。

  Demo2项目的视图:

def ajax(request):
    dic={‘name‘:‘zhnag‘,‘age‘:46}
    dic_json=json.dumps(dic)
    return HttpResponse(‘f(%s)‘%dic_json)

  此时,我们就应该在HTML文件中定义f()

function f(params) {
            console.log(params);
            console.log(typeof params);
        }

  这样,当我们点击button时,会往Demo2发送一个请求,Demo2会返回带参数的f(),由于已经定义了f()函数,所以当返回时会执行这个函数,这种方法就实现了发送跨域请求,然后接受返回值,并对返回值进行处理。

  2,版本2

  其实版本1在Demo2项目中把返回的函数名写死了,如果照版本1,所有来反问Demo2的浏览器都会得到一个叫f()的函数,我们在声明的时候也只能写成f()。其实我们可以这样在请求的时候把我们定义的函数名一起发过去,让他就给我返回我发送过去的函数,这样,我们定义函数名就可以随意了。

  Demo1项目的index.html页面上就应这样写:

function f(params) {
            console.log(params);
            console.log(typeof params);
        }
$(‘.cli‘).click(function () {
            get_ele_script(‘http://127.0.0.1:8001/ajax/?callbacks=f‘)

  Demo2项目的视图:

def ajax(request):
    a=request.GET.get(‘callbacks‘)
    dic={‘name‘:‘zhnag‘,‘age‘:46}
    dic_json=json.dumps(dic)
    return HttpResponse(‘%s(%s)‘%(a,dic_json))

  3,版本3

  上面两个版本就没有基于ajax请求,这个版本就基于ajax发送跨域请求。

  Demo1项目下的index.html页面上:

function f(params) {
            console.log(params);
            console.log(typeof params);
        }
$(‘.cli‘).click(function () {
            $.ajax({
                url:‘http://127.0.0.1:8001/ajax/callbacks=f‘,
                type:‘GET‘,
                dataType:‘jsonp‘,
            })
        })

  Demo2项目的视图:

def ajax(request):
    a=request.GET.get(‘callbacks‘)
    dic={‘name‘:‘zhnag‘,‘age‘:46}
    dic_json=json.dumps(dic)
    print(type(dic_json))
    return HttpResponse(‘%s(%s)‘%(a,dic_json))

  4,版本4

  这也是基于ajax发送的跨域请求,只是比上一版本更简单。

  Demo1项目下的index.html:

function f(params) {
            console.log(params);
            console.log(typeof params);
        }
$(‘.cli‘).click(function () {
            $.ajax({
                url:‘http://127.0.0.1:8001/ajax/‘,
                type:‘GET‘,
                dataType:‘jsonp‘,
                jsonp:‘callbacks‘,
                jsonpCallback:‘f‘
            })
        })

  Demo2项目的视图:

def ajax(request):
    a=request.GET.get(‘callbacks‘)
    dic={‘name‘:‘zhnag‘,‘age‘:46}
    dic_json=json.dumps(dic)
    print(type(dic_json))
    return HttpResponse(‘%s(%s)‘%(a,dic_json))

  5,版本5(终极版本)

  基于ajax的跨域请求,并把返回值给ajax的success。

  Demo1项目下的index.html:

$(‘.cli‘).click(function () {
            $.ajax({
                url:‘http://127.0.0.1:8001/ajax/‘,
                type:‘GET‘,
                dataType:‘jsonp‘,
                jsonp:‘callbacks‘,
                success:function (data) {
                    console.log(data)
                }
            })
        })

  Demo2项目下的视图:

def ajax(request):
    a=request.GET.get(‘callbacks‘)
    dic={‘name‘:‘zhnag‘,‘age‘:46}
    dic_json=json.dumps(dic)
    return HttpResponse(‘%s(%s)‘%(a,dic_json))

  这个版本就比较简单,书写方便

  四、基于CORS的ajax跨域请求

  最开始,我们讲的报错是:CORS头少:‘Access-Control-Allow-Origin’,既然少一个,我们就加一个,就可以了,其实这种方式才是最常用。

  Demo1项目下的index.html:

$(‘.cli‘).click(function () {
            $.ajax({
                url:‘http://127.0.0.1:8001/ajax/‘,
                type:‘get‘,
                data:{‘a‘:1},
                success:function (res) {
                    console.log(res)
                }
            })
        })

  Demo2项目下的视图:

def ajax(request):
    dic = {‘name‘: ‘zhnag‘, ‘age‘: 46}
    http=HttpResponse(json.dumps(dic))
    http[‘Access-Control-Allow-Origin‘]=‘http://127.0.0.1:8000‘     #这相当于加了一个白名单,对于‘http://127.0.01:8000’的跨域请求就允许通行
    return http

原文地址:https://www.cnblogs.com/12345huangchun/p/10339812.html

时间: 2024-10-16 02:09:03

Ajax之跨域请求的相关文章

原生JS实现Ajax及Ajax的跨域请求

  前  言          如今,从事前端方面的程序猿们,如果,不懂一些前后台的数据交互方面的知识的话,估计都不太好意思说自己是程序猿.当然,如今有着许多的框架,都有相对应的前后台数据交互的方法. 而,其中,用得最多的应该苏算是JQuery的Ajax了.但是,今天,影子向大家介绍的是原生js的Ajax,及跨域请求. 一. JQuery的Ajax 首先,先回忆下JQuery的Ajax写法: $.ajax({ url: , type: '', dataType: '', data: { }, s

原生JS实现Ajax的跨域请求

原生JS如何实现Ajax的跨域请求? 在解决这个问题之前,我们务必先清楚为什么我们要跨域请求,以及在什么情况下会跨域请求. 了解一下:"同源策略",你就知道了: 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制. 它的定义是: 一段脚本向后台请求数据,只能读取属于同一协议名.同一主机名.同一端口号下的数据: 所以,请求不同协议名.不同端口号.不同主机名下面的文件时, 将会违背同源策略,无法请求成功,需要进行跨越处理!!

Ajax-07 基于Ajax实现跨域请求

跨域 跨域名访问,如c1.com域名向c2.com域名发送请求 本质:浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性. django服务端准备 url.py: from django.conf.urls import url from hello import views urlpatterns = [ url(r'cors/', views.cors, name='cors'), url(r'jsonp/', views.jsonp, name=

ajax j跨域请求sonp

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

ajax本地跨域请求以及解决方法

什么是跨域? ??我们通常所说的跨域是狭义的,是由浏览器同源策略限制的一类请求场景.所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源,只要没有同时满足这三个条件的请求即为跨域请求,跨域请求控制台一般会出现类似错误: XMLHttpRequest cannot load http://xxxxx.php. No 'Access-Control-Allow-Origin' header is present on the requested reso

Ajax JSON 跨域请求 服务(WebApi,WCF或者其他)

直接来干货. 程式在 单台IIS下工作正常,换到域名下(负载均衡)就开开各种跨域了.研究了下,只要是符合以下条件的,基本上可以通用一种解决方案: 条件是: 1. HTTP方法:GET,Head,POST之外的方法 2. 使用POST方法,而且使用application/x-www-form-urlencoded, multipart/form-data, or text/plain 之外的 Content-Type,例如:以 POST 发送XML.JSON 等 3. 使用自定义头 解决方案: 移

使用mui.ajax完成跨域请求

一.代码 mui.ajax({ type:"post", url: serverip + '/api/v1/requestSMS/?jsoncallback=?', async:false, data: { mobile: mobile }, dataType: "jsonp", jsonp: "jsoncallback", success: function(data, status, xhr){ console.log("succe

Ajax 跨域请求 jsonp获取json数据

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

JQuery的Ajax跨域请求的解决方案

http://www.open-open.com/lib/view/open1334026513327.html 今天在项目中需要做远程数据加载并渲染页面,直到开发阶段才意识到ajax跨域请求的问题,隐约记得Jquery有提过一个ajax跨域请求的解决方式, 于是即刻翻出Jquery的API出来研究,发现JQuery对于Ajax的跨域请求有两类解决方案,不过都是只支持get方式.分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式. 什么是jsonp