jsonp跨域请求

我们通过ajax进行跨域请求的时候，请求发送过去，但是在接受返回数据的时候浏览器会进行拦截。

这是由于浏览器存在同源策略机制，同源策略阻止从一个源加载的文档或脚本获取或设置另一个源加载的文档的属性。

比如我们在python中使用requests模块对一个天气api进行请求，然后传给前端，这个是可以的：

def req(request):

    response = requests.get('http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301')

    response.encoding='utf-8'

    print(response.text)

    return render(request,'req.html',{'result':response.text})

但是如果我们用原生js:XmlHttpRequest对该天气api发送请求得到结果时，却发生了错误

     <input type="button" value="获取数据" onclick="getContent();">

     <script>

         function getContent(){

             var xhr = new XMLHttpRequest();

             xhr.open('GET','http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301')

             xhr.onreadystatechange = function(){

                 console.log(xhr.responseText)

             }

             xhr.send()

No 'Access-Control-allow-origin'

下面我们来看看两个方式的区别：

　　第一种通过python从后台发送请求获得数据，没有经过浏览器，允许获得返回数据

　　第二种我们通过浏览器直接给其他的域名发送请求，这个是不允许的

由于同源策略是浏览器的限制，所以请求的发送和响应是可以进行，只不过浏览器不接受罢了

解决方法：

img、iframe、script等具有src属性的标签

在src属性中写其他域名的文件，他不会出现跨域错误,但是需要注意的是，返回的必须是一个js文件格式，不然就会报错

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

    <h1>后台获取结果</h1>

    {{ result }}

    <h1>js直接获取结果</h1>

    <div id="content"></div>

    <input type="button" value="获取数据" onclick="getContent();">

    <script>

        function getContent(){

            var tag = document.createElement('script');

            tag.src = "http://jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403";

            document.head.appendChild(tag);

            document.head.removeChild(tag);

        }

        function list(arg){

            console.log(arg)

        }

    </script>

</body>

</html>

如果使用jQuery的话就使用：

$.ajax({

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

            type:'post',

            dataType:'jsonp',

            jsonp:'callback',

            jsonpCallback:'list'

        })

jsonp:'callback'和jsonpCallback:'list'就相当于上面url的callback=list

Django学习---jsonp跨域请求的更多相关文章

  1. Django之jsonp跨域请求原理

    在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsonp 二.XMLHttpRequest2 ...

  2. .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器

    1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...

  3. Django框架 之 跨域请求伪造

    Django框架 之 跨域请求伪造 浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same ...

  4. 【Java Web开发学习】跨域请求

    [Java Web开发学习]跨域请求 ================================================= 1.使用jsonp ===================== ...

  5. JSONP跨域请求数据报错 “Unexpected token :”的解决办法

    原文  http://www.cnphp6.com/archives/65409 Jquery使用ajax方法实现jsonp跨域请求数据的时候报错 “Uncaught SyntaxError: Une ...

  6. jQuery ajax的jsonp跨域请求

    一直在听“跨域跨域”,但是什么是跨域呢?今天做了一些了解.(利用jQuery的jsonp) jQuery使用JSONP跨域 JSONP跨域是利用script脚本允许引用不同域下的js实现的,将回调方法 ...

  7. vue.js学习之 跨域请求代理与axios传参

    vue.js学习之 跨域请求代理与axios传参 一:跨域请求代理 1:打开config/index.js module.exports{ dev: { } } 在这里面找到proxyTable{}, ...

  8. jsonp跨域请求响应结果处理函数(python)

    接口测试跨域请求接口用的jsonp,需要将回调函数里的json字符串提取出来. jsonp跨域请求的响应结果格式: callback_functionname(json字符串). #coding:ut ...

  9. 原生JavaScript封装的jsonp跨域请求

    原生JavaScript封装的jsonp跨域请求 <!DOCTYPE html> <html lang="en"> <head> <met ...

随机推荐

  1. git 设置 代理服务器

    git config --global http.proxy http://proxyuser:proxypwd@proxy.server.com:8080 git config --global h ...

  2. Android之Fresco（facebook的强大Android图片加载的框架）

    Fresco是Facebook最新推出的一款用于Android应用中展示图片的强大图片库,可以从网络.本地存储和本地资源中加载图片.其中的Drawees可以显示占位符,直到图片加载完成.而当图片从屏幕 ...

  3. @RequestParam注解的作用及用法

    最简单的两种写法,在写接口时:加或不加@RequestParam注解的区别 第一种写法参数为非必传,第二种写法参数为必传.参数名为userId 第二种写法可以通过@RequestParam(requi ...

  4. 理解 Ruby Symbol (Ruby中的冒号)

    http://blog.csdn.net/besfanfei/article/details/7966850 一直不明白:的作用 直到看到这篇文章 豁然开朗 处理符号相比字符串,占用更少的资源

  5. 【css】 文本超出2行显示省略号

    首先,要知道css的三条属性. overflow:hidden; //超出的文本隐藏 text-overflow:ellipsis; //溢出用省略号显示 white-space:nowrap; // ...

  6. python学习笔记（六）---sublime text3 创建python项目

    1.创建项目 依次鼠标左键点击Project>Add Folder to Project...,选择test文件夹: 2.保存项目 依次鼠标左键点击Project>Save Project ...

  7. 【hive】关于用户留存率的计算

    首先用户留存率一般是面向新增用户的概念,是指某一天注册后的几天还是否活跃,是以每天为单位进行计算的.一般收到的需求都是一个时间段内的新增用户的几天留存 (1)找到这个时间段内的新增用户(也可能含有地区 ...

  8. idea装在spring框架报ClassNotFound（转）

    原文链接:http://blog.csdn.net/getyouwant/article/details/50417030 环境:intellij 15 ,spring 3.1 本来新建了一个spri ...

  9. Python数据类型-04.字典

    字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据 ------------ 完美的分割线 ------------- 1.字典引入 # 为何还要用字典?存放一个人的信 ...

  10. 20155315 2016-2017-2 《Java程序设计》第八周学习总结

    教材学习内容总结 第14章 NIO与NIO2 1.认识NIO NIO使用频道(Channel)来衔接数据节点,在处理数据时,NIO可以让你设定缓冲区(Buffer)容量,在缓冲区中对感兴趣的数据区块进 ...