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. subllime的插件使用

    1.emmet快速使用的方法. html:xt 然后按下tab快速的生成一个html文档. 生成10个div----- div*10 div->ul->li->a->img 写 ...

  2. idea中解决Git反复输入代码的问题

    打开git终端,或者idea中的插件终端,输入命令: git config --global credential.helper store 借用一下别人的图不要介意哈.......... 执行上述命 ...

  3. HDU-4336-期望dp-bit

    Card Collector Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)To ...

  4. 个人知识管理系统Version1.0开发记录（09）

    MyBatis初试 MyBatis 是支持普通 SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis 消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.   运用Mybatis框 ...

  5. 《转》快速导出SSRS之RDL文件

    select name,[path],cast(cast(content AS varbinary(max)) as xml) as RDLDef from dbo.[Catalog] where t ...

  6. php http build query

    http_build_query (PHP 5, PHP 7) http_build_query — 生成 URL-encode 之后的请求字符串 说明¶ string http_build_quer ...

  7. SendMessage wMsg常量值参考

    namespace Core.WinAPI { /// <summary> /// wMsg参数常量值: /// </summary> public static class ...

  8. CNN中卷积层的计算细节

    原文链接: https://zhuanlan.zhihu.com/p/29119239 卷积层尺寸的计算原理 输入矩阵格式:四个维度,依次为:样本数.图像高度.图像宽度.图像通道数 输出矩阵格式:与输 ...

  9. LG2052 [NOI2011]道路修建

    题意 在 W 星球上有 n 个国家.为了各自国家的经济发展,他们决定在各个国家 之间建设双向道路使得国家之间连通.但是每个国家的国王都很吝啬,他们只愿 意修建恰好 n – 1 条双向道路. 每条道路的 ...

  10. DFS&&BFS

    DFS DFS搜索是按照深度的方向搜索,它类似于树的先根遍历,是树的先根遍历的推广. 1.从图的某个顶点v0出发,首先访问v0, 2.找出刚访问过的顶点的第一个未被访问过的邻接点,然后访问该结点,以该 ...