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. mytabits表关联一对一（多对一？）

    mytabits表关联一对一(多对一?) association联合 联合元素用来处理“一对一”的关系.需要指定映射的Java实体类的属性,属性的javaType(通常MyBatis 自己会识别).对 ...

  2. javascript遍历json对象数据的方法

    JSON中,有两种结构:对象和数组,对象是没有length这个属性,而数组结构是有的,下面分别说下这两种结构之间的区别和遍历方式. 1.对象 一个对象以“{”开始,“}”结束.每个“key”后跟一“: ...

  3. OSI七层与tcp/ip四层

    1)OSI七层模型 OSI中的层 功能 TCP/IP协议族 应用层 文件传输,电子邮件,文件服务,虚拟终端 TFTP,HTTP,SNMP,FTP,SMTP,DNS,Telnet 表示层 数据格式化,代 ...

  4. hdu——1873(优先队列)

    看病要排队 Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Submi ...

  5. C++轮子队

    团队Github地址:https://github.com/Pryriat/2048.git 团队展示: 队名:C++轮子队 队员组成: 黄家承(队长)              学号:3116005 ...

  6. Java 异常Exception e中e的getMessage()和toString()方法的区别

    示例代码1: public class TestInfo { private static String str =null; public static void main(String[] arg ...

  7. python实践报错：SyntaxError: Non-ASCII character

    报错: File "C:\001myWorkspace\001myWork\workspace2\MyFirstPython\src\demo4\demo4-2.py", line ...

  8. JQuery和Zepto的差异（部分）

    1.width()/height() Zepto.js: 由盒模型(box-sizing)决定 jQuery: 忽略盒模型,始终返回内容区域的宽/高(不包含 padding.border) jQuer ...

  9. [转] .net软件反编译笔记

    原文地址:http://blog.csdn.net/three_bird/article/details/51433734 在软件的破解及源码获取及重新编译的道路上会遇到一些问题,书此备查. 大名鼎鼎 ...

  10. HBase的几个实示例（二）

    1 开发环境 在进行Hbase开发前,需要安装JDK.Hadoop和Hbase,选择一款合适的开发IDE,具体安装方法就不介绍了,我的开发环境: 操作系统:Ubuntu Java版本:jdk1.8 H ...