Django之jsonp跨域请求原理
在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据。解决ajax的跨域问题有两种方法:
一、jsonp
二、XMLHttpRequest2中可以配合服务端来解决,在响应头中加入Access-Control-Allow-Origin:*
1、同源:
同源策略是浏览器的一种安全策略,所谓同源是指,域名,协议,端口号完全相同
1.1目的:保护用户信息安全
1.2限制:cookie、localStorage和IndexDB无法读取
无法操作跨域的iframe里的dom元素
ajax请求不能发送
2、跨域:
不同源则为跨域
http://api.example.com/detail.html 不同源 域名不同
2 https//www.example.com/detail.html 不同源 协议不同
3 http://www.example.com:8080/detail.html 不同源 端口不同
4 http://api.example.com:8080/detail.html 不同源 域名、端口不同
5 https://api.example.com/detail.html 不同源 协议、域名不同
6 https://www.example.com:8080/detail.html 不同源 端口、协议不同
7 http://www.example.com/detail/index.html 同源 只是目录不同
3、jsonp原理:
其本质是利用了标签具有可跨域的特性,由服务端返回预先定义好的javascript函数的调用,并且将服务端数据以该函数参数的形式传递过来
4、案例
views.py
from django.shortcuts import render
import requests def jsonp(request):
response = requests.get('http://weatherapi.market.xiaomi.com/wtr-v2/weather?cityId=101121301') #通过这个天气的API接口获得天气信息
#print(response.content) # 字节
response.encoding = 'utf-8' #将其转化为中文字符
#print(response.text) # 字符串
return render(request,'jsonp.html',{'result': response.text}) #向前端发送result
urls.py
from app01 import views
from django.contrib.staticfiles.urs
from django.urls import path urlpatterns = [
path('jsonp/', views.jsonp),
]
jsonp.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>后台获取的结果</h1>
{{ result }}
<h1>js直接获取结果</h1>
<input type="button" value="获取数据" onclick="getContent();" />
<div id="container"></div>
<script src="/static/js/jquery-1.12.4.js"></script>
<script>
function getContent(){
/* ajax原生方式发送
var xhr = new XMLHttpRequest();
xhr.open('GET','http://wupeiqi.com:8001/jsonp.html?k1=v1&k2=v2');
xhr.onreadystatechange = function(){
console.log(xhr.responseText);
};
xhr.send();
*/
/*
var tag = document.createElement('script');
tag.src = 'http://www.jxntv.cn/data/jmd-jxtv2.html?callback=list&_=1454376870403';
document.head.appendChild(tag);
document.head.removeChild(tag);
*/
$.ajax({
url: 'http://www.jxntv.cn/data/jmd-jxtv2.html', //江西电视台的url
type: 'POST', //请求方式为POST
dataType: 'jsonp', //数据格式为jsonp
jsonp: 'callback',
jsonpCallback: 'list' //表示url的callback等于list,会额外的通过url发过去
})
} function list(arg){
console.log(arg);
}
</script>
</body>
</html>
案例前端结果:
Django之jsonp跨域请求原理的更多相关文章
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
- Django学习---jsonp跨域请求
jsonp跨域请求 我们通过ajax进行跨域请求的时候,请求发送过去,但是在接受返回数据的时候浏览器会进行拦截. 这是由于浏览器存在同源策略机制,同源策略阻止从一个源加载的文档或脚本获取或设置另一个源 ...
- 深入理解jsonp跨域请求原理
在进行网站开发的过程中经常会用到第三方的数据,但是由于同源策略的限制导致ajax不能发送请求,因此也无法获得数据.解决ajax的跨域问题有两种方法: 一.jsop 二.XMLHttpRequest2中 ...
- JSONP 跨域请求原理
0x00 简介 由于浏览器的同源策略,我们想要从别的域获取数据变得困难,需要特殊的技术才能获取 0x01 使用 客户域:client.com 服务器(他域):server.com 如客户想访问 : h ...
- Django框架 之 跨域请求伪造
Django框架 之 跨域请求伪造 浏览目录 同源策略与Jsonp 同源策略 Jsonp jQuery对JSONP的实现 CORS 简介 两种请求 同源策略与Jsonp 同源策略 同源策略(Same ...
- 【Django】实现跨域请求
目录 JsonP实现跨域 在Django中间件中添加响应头 @ *** CORS 即 Cross Origin Resource Sharing 跨域资源共享. 跨域请求分两种:简单请求.复杂请求. ...
- jsonp 跨域请求
背景: JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为"Same-Origin Policy"(同源 ...
- JSONP跨域的原理解析( 一种脚本注入行为)
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制, 被称为“some-Origin Policy”(同源策略).这一策略对于Jav ...
- JSONP跨域的原理解析
JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制,被称为“Same- Origin Policy”(同源策略).这一策略对于Jav ...
随机推荐
- 还原 listagg/wm_concat 后的数据 pack_split_listatt ;
1.创建表并制作测试数据: --创建测试表 : CREATE TABLE split_table ( NAME ), ID ) ); --准备测试数据 : INSERT INTO split_tabl ...
- phaser2 微信小游戏入手
phaser2小游戏基本没什么什么问题,可以下常开发游戏.如果遇到什么问题, 可以提出来共同讨论. 下面来个例子 import './lib/weapp-adapter'; import Phaser ...
- Linux 常用指令【持续更新】
在学校的时候学过一些简单的 Linux 命令,主要是文件的创建拷贝解压等操作,最近在电脑上安装了一个CentOS6.8版本的基本版,纯命令行操作. ../ 代表上一级目录 ./ 代表本级目录 / 代表 ...
- webgl学习笔记二-绘图多点
写在前面 建议先看下第一篇webgl学习笔记一-绘图单点 第一篇文章,介绍了如何用webgl绘图一个点.接下来本文介绍的是如何绘制多个点.形成一个面. webgl提供了一种很方便的机制,即缓冲区对象, ...
- Arrays.toString 如果传入的是对象 那么调用的是此对象的toString
Arrays.toString(Object[] obj) 如果传入参数的是对象 那么调用的是此对象的toString
- 「美团 CodeM 资格赛」跳格子
题目描述 nnn 个格子排成一列,一开始,你在第一个格子,目标为跳到第 n 个格子.在每个格子 i 里面你可以做出两个选择: 选择「a」:向前跳 ai 步. 选择「b」:向前跳 bi 步. 把每步 ...
- Linux(一)——认识Linux
一.Linux介绍 (安装的是Centos6.7) 1.Linux 系统是一套免费使用和自由传播的类 Unix 操作系统(主要用在服务器上),是一个基于 POSIX 和 UNIX 的多用户.多任务.支 ...
- 前端解放生产力之–动画(Adobe Effects + bodymovin + lottie)
大概很久很久以前,2017年,参加了第二届中国前端开发者大会(FDCon2017),除了看了一眼尤雨溪,印象最深刻的就是手淘渚薰分享的关于H5交互的内容了.时光荏苒,最近再次接触,简单回顾一下. 示例 ...
- python学习(十三)进程和线程
python多进程 from multiprocessing import Process import os def processFunc(name): print("child pro ...
- windows环境利用semophore机制进行线程同步
semophore是信号量的意思,常用于PV操作,所谓PV操作就是pend(等待,直到有资源可用,并且消耗资源) V就是释放资源. semophore和mutex区别,mutex本意为互斥,用于线程独 ...