欢迎来到编程资源网!

JavaScript

当前位置:主页 > 前端教程 > JavaScript >

Js跨域请求

时间:2019-02-23|栏目:JavaScript|点击:



问题由来:

最近一直在优化两个Python学习网站,自己给自己提点需求,看看能不能实现,比如下方为www.python88.cn网站,在这个网站中,我做了一个功能,检测用户是否在该网站扫码并输入验证码,如果扫码验证过,则在后端记录并返回前端打印出来"right",如果没有扫码验证,则返回“error",返回这样标记的目的是为了通过这个标志是否做出右下角的弹窗,如果没有验证的用户,则会弹出右下角的弹窗,当然在这个网站中这点已经很容易实现了

 

接下来需求就来了,下方是www.python66.cn第二个网站,因为我想通过python66.cn向python88.cn网站引流,同样,我也想通过用户是否在第一个python88网站扫码(返回的right或error)来判断是否弹出下方的弹窗,这样则牵涉到跨域请求

 

 

什么是跨域请求:

 

举个例子:假如一个域名为aaa.cn的网站,它发起一个资源路径为aaa.cn/book/100.html的 Ajax 请求,那么这个请求是同域的,因为资源路径的协议、域名以及端口号与当前域一致(例子中协议名默认为http,端口号默认为80)。但是,如果发起一个资源路径为bbb.com/doc的 Ajax 请求,那么这个请求就是跨域请求,因为域不一致,与此同时由于安全问题,这种请求会受到同源策略限制。

ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术(还有其他方式也可以跨域请求),jsonp可以跨域请求数据,它的原理主要是利用了<script><img>标签具有src属性可以跨域链接资源的特性。jsonp和ajax原理完全不一样,不过jquery将它们封装成同一个函数。

 

如何理解<script><img>标签具有src属性标签可以跨域链接资源?

比如这是我在csdn的文章,里面的图片引入的是我python88.cn的网站图片,就是典型的跨域,包括我们<script>标签,有时候也会通过src引入一些网络上的框架,也是这个道理,jsonp就是通过这样的原来来实现的跨域

 

原理基于上面原理,但是一般我们在用的时候,通过jQuery封装好的方法来进行使用,下面开始上代码

 

1、首先我在后端视图中定义一个book_ip_sign2函数,并同步配置url

说明,jsonp跨域请求只能接受get请求,不支持post请求
 

def book_ip_sign2(request):
    user_ip = request.META['REMOTE_ADDR']
    print("***********")
    print(user_ip)
    engine = get_local_engine()
    ip_df = pd.read_sql("find_ip_num", engine)
    ip_list = list(ip_df["ip"])
    if user_ip not in ip_list:
        print("新的用户IP")
        func = request.GET.get('callback', None)
        context = {"user_ip": user_ip, "book_click_sign": "error","find_ip_num":num}
        return HttpResponse("%s(%s)"%(func,context))
    else:
        current_user = FindIpNum.objects.filter(ip=user_ip)
        current_num = current_user[0].num
        if current_num < 3:
            func = request.GET.get('callback', None)
            context = {"user_ip": user_ip, "book_click_sign": "error","find_ip_num":current_num}
            return HttpResponse("%s(%s)"%(func,context))
        elif current_num >= 3:
            func = request.GET.get('callback', None)
            context = {"user_ip": user_ip, "book_click_sign": "right", "find_ip_num":current_num}
            return HttpResponse("%s(%s)"%(func,context))

 

func = request.GET.get('callback', None)
context = {"user_ip": user_ip, "book_click_sign": "right", "find_ip_num":current_num}
return HttpResponse("%s(%s)"%(func,context))


对于上面代码,看着很多,不过你可以忽略那些业务逻辑,只需要看返回的数据即可,我这里主要想返回三个数据(error/right , current_num, user_ip),直接将这几个构造成context通过JsonResponse返回是不行的,前端会报错,后来找了点资料,发现要跟回调函数拼接,也就是下面的,func是回调函数,通过拼接用HttpResponse进行返回

前端查看该返回结果是这样的( 回调函数名和参数)

jQuery17104493579000703556_1550910515349('error_0_139.227.3.199')

 

2、前端jsonp请求

 

前端引入jQuery,通过$.ajax进行请求,注意这里的jsonp和ajax原理完全不一样,这里$.ajax  .done  .fail此类只是jQuery官方将两种请求封装成了看起来类似的方法

 

核心请求头就是url,type,dataType这些,如果请求成功,则通过.done写js逻辑,如果请求失败则通过.fail写js逻辑

 

返回的data:前面的一长串回调函数名会自动去除

 

error_0_139.227.3.199

 

$.ajax({
      url:'http://www.python88.cn/book_ip_sign2/',
      type:'get',
      dataType:'jsonp',
 })
.done(function(data){
     book_click_sign = data.book_click_sign;
     find_ip_num = data.find_ip_num;
     user_ip = data.user_ip;
     console.log(user_ip)
     console.log(find_ip_num)
     console.log(book_click_sign)
     if(book_click_sign=="error"){
          $("#hzw_showmsg").delay(5000).slideDown(1000);
     }else{
	  console.log("放过一次")
     }         
})          


大家如果想测试,可以下载源码,下载后是一个html文件,通过控制台就能看到跨域请求返回的结果

程序员资源社区

公众号回复:面试,领取Python,Java面试题和简历

上一篇:基于JS实现限时抢购倒计时间表代码

栏    目:JavaScript

下一篇:没有了

本文标题:Js跨域请求

本文地址:http://www.python66.cn/qianduan/js/336.html

您可能感兴趣的文章

广告投放 | 文章投稿 | 版权申明

重要申明:本站所有的文章、图片、软件等仅用作学习交流

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:476430956 | 邮箱:476430956@qq.com

Copyright © 2019-2029 编程教程网 版权所有 Power by DeDe58