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 bush 生成github SSH公钥

    1 如果没有安装ssh,那么使用下面的指令 sudo apt-get install ssh 2 检查SSH公钥 cd ~/.ssh 看看存不存在.ssh,如果存在的话,掠过下一步:不存在的请看下一步 ...

  2. C#通过WMI读取MAC地址

    该方法依赖WMI的系统服务,该服务一般不会被关闭;但如果系统服务缺失或者出现问题,该方法无法取得MAC地址,需要重启Windows Management Instrumentation服务. publ ...

  3. hdu4280网络流之dinic

    这题就是个模板题,不过我是第一次写dinic,好久没用链式前向星又不会了... 时间:9126ms #include<map> #include<set> #include&l ...

  4. 如何高效利用 GitHub

    正是 Github,让社会化编程成为现实.本文尝试谈谈 GitHub 的文化.技巧与影响. Q1:GitHub 是什么 Q2:GitHub 风格 Q3: 在 GitHub,如何跟牛人学习 Q4: 享受 ...

  5. vue spn如何做seo优化

    vue spn如何做seo优化 突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spn对seo不够优化,因而官方考虑到直接使用ssr 一个不算解决办法的办法prerender-spa ...

  6. VS2013命令行界面查看虚函数的内存布局

    内存布局可能使用vs的界面调试看到的旺旺是一串数字,很不方便,但是vs的命令行界面可以很直观的显示出一个类中具体的内存布局. 打开命令行.界面如下所示: 测试代码如下所示: class Base1 { ...

  7. react native 获取 软键盘高度 和 新增软键盘的组件

    import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, Te ...

  8. ubuntu16.04x64环境下 tar方式 安装mysql-5.7.21 试水过程记录

    前几天读研时候上铺的同学和我说到了一个问题,就是他们单位的redhat服务器给MySQL服务的数据库文件所在的磁盘空间不够了,对于这个问题我也是没有想过的,在受朋友之托下考虑自己做下复现,由于同学所在 ...

  9. nginx: [emerg] "fastcgi_pass" directive is duplicate in /etc/nginx/sites-enabled/default:57

    /************************************************************************************************ * ...

  10. bootstrap table教程--使用入门基本用法

    笔者在查询bootstrap table资料的时候,看了很多文章,发觉很多文章都写了关于如何使用bootstrap table的例子,当然最好的例子还是官网.但是对于某部分技术人员来说,入门还是不够详 ...