跨域请求

一般情况下我们的请求只能给自己的网站发送请求,如果给别的网站发送请求时,浏览器会进行同源限制,跨域请求就是我们的网站如果要获取其他网站的数据的话,可以通过一下方式实现

例如:要获得以下数据

def get_data(request):
    return HttpResponse('数据')

使用代码完成跨域请求

request发送请求的时候跨域无限制

def test1(request):
    response = requests.get('http://127.0.0.1:8000/get_data/')
    return render(request, 'test1.html', {'response': response})

在前端显示

{{ response.text }}

jsonp实现跨域请求

别人数据

def get_data(request):
    func_name = request.GET.get('callback')
    return HttpResponse('%s("数据")' % func_name)

使用jsonp实现跨域请求

<script>
    function func(arg){
        console.log(arg)
    }

    $.ajax({
        url: "http://127.0.0.1:8000/get_data/",
        type: 'GET',
        dataType: 'JSONP',
        jsonp: 'callback',
        jsonpCallback: 'list'
    });
    
</script>

注意:

首先,要让别人对数据进行处理

其次,为了让获得的数据易读,需要将数据进行list

其原理是使用带有src的标签不会收到同源限制,而且要求自己定义一个数据,使用标签引入,而且要求别人也要在数据外面包一层数据,如下

自己获得

<script>
  function func(arg) {
    console.log(arg);
  }
</script>
<script src="http://127.0.0.1:8000/get_data/?callback=func"></script>

我们也可以手动创建标签

<script>
    function func(arg) {
        alert(arg);

        document.head.removeChild(tag);
    }

    function jsonp(url){
        tag = document.createElement('script');
        tag.src = url;
        document.head.appendChild(tag);
    }

    jsonp('http://127.0.0.1:8000/get_data/?callback=func')
</script>

应用场景:

调用者需要和数据提供者协商,首先需要数据提供者提供一个API,然后互相商讨使用哪一种方式提取数据,如果使用jsonp格式提取数据的话需要数据提供者对数据进行一定的处理(获得callback,然后使用callback包裹你的数据),如果不想让数据提供者麻烦的话,就只能用自带的request模块来实现

core方法

首先要明白,jsonp进行跨域请求的方法是绕过同源策略,使用带有src的标签进行请求

其次,浏览器为什么会进行同源策略,其实在请求可以顺利的到达对方的URL,也同样能取到数据,但是在返回的时候少了Access-Control-Allow-Origin 响应头,因此,我们的做法就是将头加进去

别人数据

def get_data(request):
    response = HttpResponse('数据')
    response['Access-Control-Allow-Origin'] = 'http://127.0.0.1:8899'  # 如果为*的话对所有请求有效
    return response

这样让别人的数据进行处理之后我们自己就按照一般情况请求就可以了

$.ajax({
  url: 'http://127.0.0.1:8000/get_data/',
  type: 'GET',
  success: function (data) {
    console.log(data);
  }
})

如果我们给别人提供数据的话,如果允许所有的人都可以请求的话,使用中间件比较好

注意:

我门正规的请求称为简单请求,但是,有时候发请求的时候会发送复杂请求,请求方式改变或者请求头的改变可以变为复杂请求,

如果发送的是复杂请求的话,首先会发送一个option,然后发送数据,复杂请求接受到的request.method是option

因此数据提供者应该在接受请求的时候进行一个判断,如果request.method的话,将请求方式和请求头进行修改,然后再发送数据

由于复杂请求发送两次,严重影响效率,因此我们应该尽量避免发送复杂请求

兼容复杂请求代码如下

def get_data(request):
    if request.method == "OPTIONS":
        # 预检
        response = HttpResponse()
        response['Access-Control-Allow-Origin'] = "*"
        # response['Access-Control-Allow-Methods'] = "PUT"
        response['Access-Control-Allow-Headers'] = "xxx"   # 注意在前端也是要一样的
        return response

    elif request.method == "GET":
        response = HttpResponse("机密数据")
        response['Access-Control-Allow-Origin'] = "*"

        return response

跨站获取相应头

默认获取到的所有响应头只有基本信息,如果想要获取自定义的响应头,则需要再服务器端设置Access-Control-Expose-Headers。

跨站传cookie

在跨域请求中,默认情况下,HTTP Authentication信息,Cookie头以及用户的SSL证书无论在预检请求中或是在实际请求都是不会被发送。

如果想要发送:

  • 浏览器端:XMLHttpRequest的withCredentials为true
  • 服务器端:Access-Control-Allow-Credentials为true
  • 注意:服务器端响应的 Access-Control-Allow-Origin 不能是通配符
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,772评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,458评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,610评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,640评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,657评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,590评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,962评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,631评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,870评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,611评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,704评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,386评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,969评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,944评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,179评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,742评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,440评论 2 342

推荐阅读更多精彩内容

  • 前言:对于跨域请求,很早之前就有去了解过,但因为一直关注的都是服务器后端开发,故也就仅仅停留在概念的理解上而没有机...
    ken_ljq阅读 89,705评论 6 128
  • 同源策略 理解跨域首先必须要了解同源策略。同源策略是浏览器上为安全性考虑实施的非常重要的安全策略。何谓同源:URL...
    48892085f47c阅读 715评论 0 6
  • 1. 所谓跨域 跨域是一种浏览器同源安全策略,也即浏览器单方面限制脚本的跨域访问。很多人可能误认为资源跨域时无法请...
    blurooo阅读 6,153评论 11 54
  • 概念 当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求。出于安...
    饥人谷_Grey高阅读 352评论 0 2
  • 太阳升起的时候 雨还在下 我安抚跳动了一晚的心 出门 路过江边 有一条很大的鱼 总有人躺在上面 不怕被吃掉 突然耳...
    光暗间的舞者阅读 131评论 5 2