跨源请求cors和jsonp
0、产生跨域的原因
浏览器的同源策略
什么是浏览器的同源策略?
src开发
ajax禁止
解决方法
jsonp
通过src绕过浏览器的同源策略
缺点：只发送GET请求
cors
通过设置相应头
分类
简单请求
复杂请求 options 预检
一、cors（常用简单）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>django</h2>
<input type="button" name="" id="getService" value="获取python的数据">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$("#getService").on('click', function () {
// alert(123)
$.ajax({
// 目标域，获取数据
url: "http://127.0.0.1:8002/service/",
type: "get",
success: function (data) {
console.log(data)
// console.log(typeof data)
}
});
})
</script>
</body>
</html>
def service(request):
dic = {"name": "python"}
response = HttpResponse(json.dumps(dic))
# 获取资源的ip
response["Access-Control-Allow-Origin"] = "http://127.0.0.1:8000"
return response
CORS中间件
https://www.cnblogs.com/wt7018/p/11531343.html
二、jsonp
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h2>django</h2>
<input type="button" name="" id="getService" value="获取python的数据">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
$("#getService").on('click', function () {
// alert(123)
$.ajax({
// 目标域，获取数据
url: "http://127.0.0.1:8002/service/",
type: "get",
dataType: "jsonp",
jsonp: "callbacks",
// jsonpCallback: "abc",
success: function (data) {
console.log(data)
// console.log(typeof data)
}
});
})
</script>
</body>
</html>
def service(request):
dic = {"name": "python"}
dic_str = json.dumps(dic)
func = request.GET.get("callbacks")
print(func)
return HttpResponse("{}('{}')".format(func, dic_str))
跨源请求cors和jsonp的更多相关文章
- 启用跨源请求 (CORS)
https://docs.microsoft.com/zh-cn/aspnet/core/security/cors
- 已拦截跨源请求：同源策略禁止读取位于XXX的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'
vue+springboot项目 前端发送请求微信 URL:http:/.........(企业微信的路径) 请求成功,数据发送过去可以接收到,处理完毕后发送返回值给我 我这边前端网络响应处可以看到返 ...
- Spring Boot全局支持CORS(跨源请求)
import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet. ...
- 使用jsonp实现跨源请求
jsonp 该技术用来实现跨源请求,即向协议.域名.端口号不同的服务器发送请求 通过使用 script 标签的 src 向服务器发送GET请求http://xxx/xxx?callback=callb ...
- JS 跨源请求
一个 URL 大概包含的部分:scheme://host:port/path?#hash 比如一个 URL 为 http://www.xxx.com:8888/school/student.html, ...
- ArcGIS Server API for JavaScript调用错误：已阻止跨源请求：同源策略禁止读取位于......
已阻止跨源请求:同源策略禁止读取位于 http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapSe ...
- 跨源资源共享(CORS)概念、实现（用Spring）、起源介绍
本文内容引用自: https://howtodoinjava.com/spring5/webmvc/spring-mvc-cors-configuration/ https://developer.m ...
- Django-缓存机制、跨域请求(CORS)、ContentType组件
Django缓存机制: 在settings中间件里面设置: 三个粒度: 1 全站缓存 用中间件: MIDDLEWARE = [ # 'django.middleware.cache.UpdateCac ...
- Firebug: 已拦截跨源请求：同源策略禁止读取位于XXX的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-
第一种,就是在被请求的程序中添加HTTP头,即CORS跨域(跨域资源共享,Cross-Origin Resource Sharing) 如: Response.Headers.Add("Ac ...
随机推荐
- H3C配置路由器作为TFTP客户端
- H3C查看、删除已经保存配置文件--用户图示（console）以上
<H3C>display saved-configuration //显示已经保存的内容 <H3C>reset saved-configuration //删除 ...
- [转载]sublime用法精华
Sublime Text 全程指南 九月 03.2015. 暂无评论 永远站 作者:Lucida 原文链接:http://lucida.me/blog/sublime-text-complete-gu ...
- 2018-2-13-win10-uwp-图标制作器
title author date CreateTime categories win10 uwp 图标制作器 lindexi 2018-2-13 17:23:3 +0800 2018-2-13 17 ...
- 关于electron中入口文件main.js一些重要参数（持续更新maybe）
const {app, BrowserWindow} = require('electron') const path = require('path') let mainWindow functio ...
- P3810 陌上花开 CDQ分治
陌上花开 CDQ分治 传送门:https://www.luogu.org/problemnew/show/P3810 题意: \[ 有n 个元素,第 i 个元素有 a_i. b_i. c_i 三个属性 ...
- Qt和c/c++connect函数冲突解决方法
在使用c/c++的connect函数时在前面写::connect()这样就可以解决了
- 如何删除Word自动编号后文字和编号之间的空白距离
一.出现的现象:使用word进行自动编号之后,编号和其后的文字出现如下图所示的空白 二.如何解决问题 选中列表内容右键->调整列表缩进->选择“编号之后(W)"为不特别标注-&g ...
- 第二阶段：4.商业需求文档MRD：6.PRD-其他需求
- Spring Boot 单元测试示例
Spring 框架提供了一个专门的测试模块(spring-test),用于应用程序的单元测试. 在 Spring Boot 中,你可以通过spring-boot-starter-test启动器快速开启 ...