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. 在Angular中定义共享的Providers

    转自:https://segmentfault.com/a/1190000010700308 有时,你需要在 Angular 应用中创建一个共享模块,该模块定义了功能模块和lazy-loaded模块可 ...

  2. 使用触发器定义 WPF 控件的行为

    Expression Studio 4.0   其他版本 Expression Studio 3.0 Expression Studio 2.0   此主题尚未评级 - 评价此主题   在应用程序的生 ...

  3. KMP与AC自动机

    KMP算法主要思想就是预处理出失配函数, 从而减少匹配失败时的回溯, 复杂度是$\Theta(m+n)$, 已达到理论下界 c++代码如下 int n, f[N]; char t[N], p[N]; ...

  4. hdu2897找规律

    又是找规律,无语了,说好的博弈呢,搞了半天的sg函数没有一点头绪 当n%(p+q)==0时,先手win,第一次取q个,以后每次,后手取k个,先手就取p+q-k个,最后,后手必取q个 当n=(p+q)* ...

  5. Linux中查看进程和杀掉进程

    ps -A查看正在运行的所有进程 kill -9 xxx杀掉某个进程,xxx为进程ID.

  6. VS中的生成事件

    1:为什么需要使用生成事件? 在实际开发过程中,一个公共使用的类库,在项目生成DLL后需要被复制到不同的目录下被引用,是不是觉得每次生成之后都需要人工复制是很麻烦的一件事情 我们可以利用VS中的项目生 ...

  7. Vivado_MicroBlaze_问题及解决方法_汇总（不定时更新）

    Vivado_MicroBlaze_问题及解决方法_汇总(不定时更新) 标签: Vivado 2015-07-03 14:35 4453人阅读 评论(0) 收藏 举报  分类: 硬件(14)  版权声 ...

  8. L178 smart meter watchdog

    There is "no realistic prospect" of the government meeting its own deadline to install sma ...

  9. New Concept English Two 14 34

    recently  busy  a lot ,just  practices   every   morning. $课文32  购物变得很方便 324. People are not so hone ...

  10. I.MX6 Linux U-boot 环境变量解析

    /********************************************************************************** * I.MX6 Linux U- ...