浏览器的同源策略及跨域解决方案

同源策略

一个源的定义

如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的

举个例子:

下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: 

URL结果原因
http://a.xyz.com/dir2/other.html成功 
http://a.xyz.com/dir/inner/another.html成功 
https://a.xyz.com/secure.html失败不同协议 ( https和http )
http://a.xyz.com:81/dir/etc.html失败不同端口 ( 81和80)
http://a.opq.com/dir/other.html失败不同域名 ( xyz和opq)

同源策略是什么

同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以xyz.com下的js脚本采用ajax读取abc.com里面的文件数据是会被拒绝的。

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

不受同源策略限制的

1. 页面中的链接,重定向以及表单提交是不会受到同源策略限制的。

2. 跨域资源的引入是可以的。但是js不能读写加载的内容。如嵌入到页面中的<script src="..."></script>,<img>,<link>,<iframe>等。

JSONP解决跨域问题

1、JSONP原理分析

利用 浏览器加载静态资源的时候不限制跨域

<script src=""></script>

我们使用cdn方式引用的jQuery文件也是跨域的,它就可以使用。

同样是从其他的站点拿东西,script标签就可以。那我们能不能利用这一点搞点事情呢?

<!DOCTYPE HTML>
<html>
<head><meta charset="UTF-8"><meta http-equiv="x-ua-compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>xyz</title>
</head>
<body>
<button id="b1">点我</button>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>function rion() {console.log("选我不后悔!");}
</script>
<script src="http://127.0.0.1:8002/abc/"></script>
</body>
</html>

后端返回响应

def abc(request):return HttpResponse("rion()")

刷新页面,可以看到下面的结果。

这样就利用了浏览器加载静态资源的时候不限制跨域的特性,实现了跨域请求拿数据。

2.jQuery中的getJSON方法

jQuery中封装了专门的方法实现jsonp。

示例:

点击b1按钮发送jsonp请求到后端,然后后端返回数据。

html :

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<button id="b1">点我发送请求</button><script src="jquery.min.js"></script>
<script>// 点击b1按钮发送jsonp请求
    $('#b1').click(function () {// 使用jquery提供的getJSON方法请求获取数据,// callback=? 是固定格式,会创建一个随机的字符串作为callback的value。
        $.getJSON('http://127.0.0.1:8000/index/?callback=?',function (data) {console.log(data)})})
</script>
</body>
</html>

后端项目函数:

def index(request):data = {"name": "zwq", "age": 18}func_name = request.GET.get('callback')print(func_name) # jQuery3310589826002995957_1547112594072return HttpResponse('{}({})'.format(func_name,json.dumps(data)))

但JSONP有一定缺陷:

1.前后端都要支持

2.只能发GET请求

 CORS解决跨域问题

CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing)。它允许浏览器向跨源服务器发出XMLHttpRequest请求,从而解决AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持。目前基本上主流的浏览器都支持CORS。所以只要后端服务支持CORS,就能够实现跨域。

1.简单请求和非简单请求介绍

浏览器将CORS请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

一个请求需要同时满足以下两大条件才属于简单请求。

(1) 请求方法是以下三种方法之一:HEADGETPOST(2)HTTP的头信息不超出以下几种字段:AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type:只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

2.简单请求的处理方式

在跨域场景下,当浏览器发送简单请求时,浏览器会自动在请求头中添加表明请求来源的 Origin 字段。

 

我们的后端程序只需要在返回的响应头中加上 Access-Control-Allow-Origin 字段,并且把该字段的值设置为 跨域请求的来源地址或简单的设置为 * 就可以了。

 例如:我们可以在Django中间件中的process_response方法来给相应对象添加该字段。

from django.utils.deprecation import MiddlewareMixinclass CORSMiddleware(MiddlewareMixin):# 处理简单请求的跨域请求def process_response(self, request, response):# 告诉浏览器来自这个源的请求是我允许的跨域请求# response['Access-Control-Allow-Origin'] = 'http://localhost:63342'# 给响应头加上 Access-Control-Allow-Origin 字段 并简单的设置为 *,表示所有跨域简单请求都放行response['Access-Control-Allow-Origin'] = '*'return response

非简单请求的处理方式

我们开发中常用到的那些请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json的都是非简单请求。

对于非简单请求,浏览器通常都会在请求之前发送一次 OPTIONS 预检 请求。该请求会像后端服务询问是否允许从当前源发送请求并且询问允许的 请求方法 和 请求头字段

举个例子:

 我们前端使用axios向后端发送PUT请求,结果:

 

看看发送的具体请求:

 

解决办法也很简单,我们可以在后端简单的给响应对象添加上 常用请求方法(PUT、DELETE)的支持就可以了。

在上面Django的中间件中添加如下代码:

class CORSMiddleware(MiddlewareMixin):"""对所有跨域请求做放行处理"""def process_response(self, request, response):# 所有跨域简单请求都放行response['Access-Control-Allow-Origin'] = '*'if request.method == 'OPTIONS':# 告诉浏览器你发的非简单请求(修改了Content-type)我允许了response['Access-Control-Allow-Headers'] = 'Content-type'# 告诉浏览器 你发送PUT请求我也支持response['Access-Control-Allow-Methods'] = 'PUT, DELETE'return response

使用django-cors-headers

我们这个中间件确实能解决目前的CORS跨域问题,但是我们的方法肯定是不够严谨的,django有一个第三方包django-cors-headers。

安装:

pip install django-cors-headers

注册APP:

INSTALLED_APPS = [...'app01.apps.App01Config','corsheaders',  # 将 corsheaders 这个APP注册
]

添加中间件:

必须放在最前面,因为要先解决跨域的问题。只有允许跨域请求,后续的中间件才会正常执行。

MIDDLEWARE = ['corsheaders.middleware.CorsMiddleware',  # 添加中间件'django.middleware.security.SecurityMiddleware','django.contrib.sessions.middleware.SessionMiddleware','django.middleware.common.CommonMiddleware',# 'django.middleware.csrf.CsrfViewMiddleware','django.contrib.auth.middleware.AuthenticationMiddleware','django.contrib.messages.middleware.MessageMiddleware','django.middleware.clickjacking.XFrameOptionsMiddleware',
]

配置

可以选择不限制跨域访问

CORS_ORIGIN_ALLOW_ALL = True

或者可以选择设置允许访问的白名单

CORS_ORIGIN_ALLOW_ALL = False
CORS_ORIGIN_WHITELIST = (# '<YOUR_DOMAIN>[:PORT]','127.0.0.1:8080'
)

更多详细配置详细请查看django-cors-headers项目

 

转载于:https://www.cnblogs.com/zwq-/p/10252210.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/364306.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

sass继承

extend sass中&#xff0c;选择器继承可以让选择器继承另一个选择器的所有样式&#xff0c;并联合声明。使用选择器的继承&#xff0c;要使用关键词extend&#xff0c;后面紧跟需要继承的选择器。 scss.style css.style 从sass 3.2.0以后就可以定义占位选择器%。 这种选择器…

论中国传统辩证推理科学理论范式(ZZ)

摘要&#xff1a;西方科学的形式逻辑以一系列相互独立的公理、设定、经验模型等为大前提&#xff0c;以不矛盾的逻辑为推理手段&#xff0c;构建其系统的科学理论&#xff0c;决定了其理论体系下的世界是众多不连续的带状、绳索状或网状结构的共存体&#xff0c;而不可能是一个…

计算机病毒及其防治评课,区初中信息技术教研活动公开课评课感想

今天上午&#xff0c;在我校成功举行了区初中信息技术教研活动&#xff0c;总共开设了三节课&#xff0c;都是由我校老师执教的。听后受益匪浅&#xff0c;感受颇深&#xff0c;以下是本人的评课感想。一、首先说一下三位老师的共同点&#xff1a;1、三位老师都用了导学案&…

Django—路由层,视图层

路由层urls 浏览器会自动给url后加一个“/” django会自动给路由的正则表达式前面加一个“/” django会给任何不带“/”结尾的url语句添加“/”&#xff08;可设置&#xff09; 短路路由规则&#xff1a;匹配到第一条就忽略后面所有&#xff01; 所以路由顺序很重要&#xff01…

分数怎么化成带分数_人教版五年级下册第4单元带分数及把假分数化成整数或带分数教学视频+知识点...

|点击题目下方蓝字一键关注 小学生知识库|【教学视频】分数的分类与互化【知识点】带分数的意义和特征&#xff1a;像…这样由整数和真分数合成的数叫做带分数。假分数化成整数或带分数的方法是什么&#xff1f;①当假分数的分子是分母的倍数时&#xff0c;这个假分数可以化成整…

Java 8功能教程– ULTIMATE指南(PDF下载)

编者注&#xff1a;在本文中&#xff0c;我们提供了全面的Java 8功能教程。 自Java 8公开发布以来已经有一段时间了&#xff0c;所有迹象都表明这是一个非常重要的版本。 我们在Java Code Geeks处提供了大量教程&#xff0c;例如“ 玩Java 8 – Lambda和并发” &#xff0c;“…

盆景

dvbbs收藏本页联系我们论坛帮助dvbbs恢复默认设置登录注册 搜索风格论坛状态论坛展区道具中心我能做什么 >> 优秀作品欣赏、个人作品展示。(The excellent work enjoys, personal work demonstration) 搜一搜相关精彩主题 盆景艺术在线论坛 → 盆景论坛(penjing Forum) →…

计算机硬件系统的构成教学设计,2.1 计算机硬件系统教学设计思路

第二章&#xff1a;计算机的硬件和软件第一节&#xff1a;计算机的硬件构成一、教材分析本节的重点是冯.诺依曼存储程序思想以及相应的计算机机硬件逻辑结构。通过对计算机五大逻辑部件的理解从而更好的掌握计算机在处理信息时的工作流程。同时要求学生能够识别常见的计算机设备…

小程序左右标签滑块排行榜

小程序左右标签滑块排行榜 效果: <view class"menu"><view class"{{currentTab0?select:default}}" data-current"0" bindtap"switchNav">成绩</view><view class"{{currentTab1?select:default}}" …

mysql pxc_MySQL之PXC集群搭建

一、PXC 介绍1.1 PXC 简介PXC 是一套 MySQL 高可用集群解决方案&#xff0c;与传统的基于主从复制模式的集群架构相比 PXC 最突出特点就是解决了诟病已久的数据复制延迟问题&#xff0c;基本上可以达到实时同步。而且节点与节点之间&#xff0c;他们相互的关系是对等的。PXC 最…

Nashorn简介

引入了Java 8和名为“ Nashorn”的新JavaScript引擎。 Nashorn基于Da Vinci Machine&#xff0c;该项目旨在为JVM添加动态语言支持。 Nashorn是使混合软件比以前更轻松的一个很好的里程碑。 该引擎的出色功能使您能够在Java&#xff08;任何其他编译语言&#xff09;代码和java…

CCF关于NOIP竞赛程序提交的管理规则

在NOIP复赛中&#xff0c;NOI各省组织单位必须严格遵循CCF《关于NOIP数据提交格式的说明》的规范在竞赛结束后规定时间内向CCF提交本赛区所有参赛选手的程序。 为竞赛的公平以及赛后按时完成竞赛程序的评测&#xff0c;制定本规则。 提高组&#xff1a;每次赛后3小时内提交&…

计算机三级信息安全技术考什么2019,2019计算机三级信息安全技术精品练习8

2019计算机三级信息安全技术精品练习82019-06-19 16:37:49来源&#xff1a;计算机等级考试网分享导读&#xff1a;还不知道全国计算机等级考试时间吗&#xff1f;2019年考试共举行4次&#xff0c;下一次考试时间为9月份&#xff0c;距离考试的时间越来越短了&#xff0c;已经报…

微软Visual Studio2005开发工具路线图详解

微软Visual Studio2005开发工具路线图详解 随着企业需要的不断演变&#xff0c;Microsoft 依旧致力于提供创新的开发人员工具来满足这些不断变化的需求&#xff0c;从而确保客户的成功。为帮助组织规划未来的软件开发工作&#xff0c;Microsoft 提供了一个开发人员工具计划版本…

解决微信小程序的wx-charts插件tab切换时的显示会出现位置移动问题-tab切换时,图表显示错乱-实现滑动tab

解决Echarts在微信小程序tab切换时的显示会出现位置移动问题 tab切换时&#xff0c;图表显示错乱 <canvas class"kcanvas" canvas-id"ringCanvas" hidden"{{currentTab 1}}"></canvas> <view hidden"{{currentTab ! 1}}…

mysql字段唯一确定_验证表里某不确定的字段的值是否唯一的方法?

你这个问题是否可以理解为“验证表里的某一不确定的字段的值&#xff0c;没有重复”&#xff1f;如果是的话&#xff0c;那么你就可以先查出表的总记录数&#xff0c;然后在查出该字段去重之后的总记录数&#xff0c;对比两次结果&#xff0c;如果数量相同则没有重复&#xff1…

说下Java堆空间结构,及常用的jvm内存分析命令和工具

Java堆空间结构图&#xff1a;http://www.cnblogs.com/SaraMoring/p/5713732.html JVM内存状况查看方法和分析工具&#xff1a; http://blog.csdn.net/neosmith/article/details/47753733 转载于:https://www.cnblogs.com/zhuyeshen/p/11005208.html

Java EE:基础知识

想要了解一些基本原则&#xff0c;即与Java EE相关的技术术语。 对于许多人来说&#xff0c;Java EE / J2EE仍然最多意味着Servlet&#xff0c;JSP或Struts。 没有冒犯或双关语&#xff01; 无论如何&#xff0c;这不是Java EE的“圣经”。 我没有能力写这样的东西&#xff01…

自定义鼠标样式

效果图展示&#xff1a; 代码 &#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><meta http-equiv&q…

空军军医大学计算机复试线,空军军医大学2019年考研复试分数线

2019考研国家线公布之后&#xff0c;各招生院校会于3月中下旬陆续公布分数线&#xff0c;大家需要密切关注。空军军医大学2019年考研复试分数线已经公布&#xff0c;大家赶紧看一下及时准备复试和调剂吧!广大考生&#xff1a;我校2019年硕士研究生第一志愿复试工作拟于近期启动…