什么同源策略?

同源

同源指的是URL有相同的协议、主机名和端口号。

同源策略

同源策略指的是浏览器提供的安全功能,非同源的RUL之间不能进行资源交互

跨域

两个非同源之间要进行资源交互就是跨域。

浏览器对跨域请求的拦截

浏览器是允许跨域请求的,但是请求返回的数据会被浏览器拦截,无法显示到页面,拦截过程:

解决跨域JSONP

jsonp的原理就是利用了script标签不受浏览器同源策略的限制,然后和后端一起配合来解决跨域问题的。

(前端+后端)不受同源策略影响的标签:<image>、<script>、<link>、<iframe>

JSONP利用script标签,将请求放在src标签中,前端通过一段javascript代码获取后端数据。

<script src="https://localhost:8080/getJSONP?fn=setJSONP"></script>

优势:轻量、兼容性高,不需要XMLHttpRequest

缺点:

  • 只支持get请求
  • 存在被恶意注入脚本风险
  • 接口异常,无法监听

 CORS(跨域资源共享)

后端设置响应头中的Access-Control-Allow-Origin字段,该属性表示哪些域名可以访问资源,如果设置通配符则表示所有网址都可以访问资源。

res.header('Access-Control-Allow-Origin','*')
res.header('Access-Control-Allow-Origin','http://localhost:8080')

优点:操作简单、支持所有http请求类型(get、post、delete、put)

缺点:IE8以下的浏览器不支持

代理转发

同源策略是浏览器需要遵循的标准,而如果是服务器向服务器请求就无需遵循同源策略。 

nginx反向代理方式和node中间件代理方式的原理其实差不多,都是利用了服务器和服务器之间通信不受浏览器的同源策略的限制,但是node代理方式相对复杂一些,还要自己搭建一个node服务器,而用nginx只需要修改nginx.conf配置文件即可解决跨域问题。

postMessage

h5新增的跨文档消息传递,window.postMessage() 方法可以安全地实现跨源通信,此方法一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

主要的用途是实现多窗口,多文档之间通信:

  1. 页面和其打开的新窗口的数据传递
  2. 多窗口之间消息传递
  3. 页面与嵌套的 iframe 消息传递
<body> <h2>index页面</h2><iframesrc="http://localhost:3000"frameborder="0"id="iframe"onload="load()"></iframe>
</body>
<script>window.addEventListener('message', ev => {const {data, origin, source} = evif(origin !== 'http://localhost:3000') returnconsole.log('接收iframe页面发送的消息:', data)})function load() {iframe.contentWindow.postMessage("给iframe页面发送的消息", "http://localhost:3000");}
</script>

<body><h1>iframe嵌入的页面</h1>
</body>
<script>window.addEventListener('message', ev => {const {data, origin, source} = evif(origin !== 'http://127.0.0.1:5500') returnconsole.log('接收到index页面发送的消息:', data)source.postMessage('给index页面发送的消息', origin)})
</script>

 使用postMessage向其它窗口发送数据的时候需要注意的就是,应该始终指定精确的目标 origin,而不是 *,使用window监听message事件,接收其他网站发送的 message时,请始终使用 origin 和 source 属性验证发件人的身份

Websocket方式解决跨域

使用Websocket也可以解决跨域问题,因为WebSocket本身不存在跨域问题,所以我们可以利用webSocket来进行非同源之间的通信

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

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

相关文章

android 13.0 设置上网应用白名单(上网app白名单)

1.概述 在13.0的产品rom定制开发中,在对产品进行网络模块开发中,有功能需要要求设置某些app可以上网,某些app不可以上网,就是所谓的网络应用白名单功能 接下来就来分析下相关的网络模块,来具体实现相关功能的开发 2.设置上网应用白名单(上网app白名单)核心代码 framewor…

计算机网络(1):开始

计算机网络&#xff08;1&#xff09;&#xff1a;开始 计算机网络在信息时代中的作用 21世纪的一些重要特征就是数字化、网络化和信息化&#xff0c;是一个以网络为核心的信息时代。要实现信息化就必须依靠完善的网络&#xff0c;因为网络可以非常迅速地传递信息。因此网络现…

人工智能原理课后习题(考试相关的)

文章目录 问答题知识表示一阶谓词逻辑表示法语义网络表示法 确定推理谓词公式永真和可满足性内容归结演绎推理 不确定推理主观贝叶斯可信度方法证据理论 搜索策略机器学习 问答题 什么是人工智能&#xff1f; 人工智能就是让机器看起来像人类表现出的智能水平一样 人工智能就是…

ElasticSearch单机或集群未授权访问漏洞

漏洞处理方法&#xff1a; 1、可以使用系统防火墙 来做限制只允许ES集群和Server节点的IP来访问漏洞节点的9200端口&#xff0c;其他的全部拒绝。 2、在ES节点上设置用户密码 漏洞现象&#xff1a;直接访问9200端口不需要密码验证 修复过程 2.1 生成认证文件 必须要生成…

Multimodal Chain-of-Thought Reasoning in Language Models语言模型中的多模态思维链推理

Abstract 大型语言模型 (LLM) 通过利用思维链 (CoT) 提示生成中间推理链作为推断答案的基本原理&#xff0c;在复杂推理方面表现出了令人印象深刻的性能。然而&#xff0c;现有的 CoT 研究主要集中在语言情态上。我们提出了 Multimodal-CoT&#xff0c;它将语言&#xff08;文本…

c++期末复习总结语言基础

常用的输出设置 dex十进制、oct八进制、dec十六进制 语法cout<<hex<<17; 浮点数精度 Steprecision(n)n代表有效位数&#xff0c;包括小数和整数 Setw(n) n是输入数据占用屏幕的宽度的字符个数&#xff0c;输入数据默认右对齐 设置对齐方式 Setiosflags(ios:ri…

unity—UGUI 点击按钮后,持续点击空格键会持续出发按钮

在unity开发当中&#xff0c;使用UGUI开发&#xff0c;无论是你代码绑定按钮事件&#xff0c;还是在Inspector窗口直接拖拽绑定的事件&#xff0c;点击按钮事件后&#xff0c;按空格键都会再次执行相关的方法。 默认情况下&#xff0c;Unity将空格键映射为UI按钮的Submit提交操…

Python 爬虫之简单的爬虫(二)

爬取百度热搜榜 文章目录 爬取百度热搜榜前言一、展示哪些东西二、基本流程三、前期数据获取1.引入库2.请求解析获取 四、后期数据处理1.获取保存 总结 前言 每次打开浏览器&#xff0c;我基本上都会看一下百度热搜榜。这篇我就写一下如何获取百度的热搜榜信息吧。 如果到最后…

深度学习中的张量是什么意思,为什么要引入张量的概念。

问题描述&#xff1a;深度学习中的张量是什么意思&#xff0c;为什么要引入张量的概念。 问题解决&#xff1a;张量是一种特殊的数据结构&#xff0c;是矩阵的延申。矩阵是一种特殊的张量。 在数学世界中&#xff0c;需要用数据来描述现实世界中的存在的实物&#xff0c;比如用…

最近的进展

几天前&#xff0c;我还在老老实实的写着博客&#xff0c;突然晚上睡了一觉&#xff0c;发现左脚的脚踝特别疼&#xff0c;疼的无法直立行走&#xff0c;我想去医院&#xff0c;但是真的没办法走动&#xff0c;我没办法一个人去医院&#xff0c;这两天才好了一点&#xff0c;那…

C语言之双链表理解与应用

其实网上也有好多关于双链表理解&#xff0c;知乎上同样有写的很好文章。这里主要看双链表概念&#xff0c;应用场景&#xff0c;举例。 &#xff11;&#xff0c;双链表概念 双链表是一种更复杂的线性数据结构&#xff0c;它由一系列节点组成&#xff0c;每个节点包含数据元素…

C语言初学6:判断

一、if 语句 #include<stdio.h> int main() {// 定义局部变量int a 10;// 使用if语句检查布尔条件if(a < 20){/* 如果为真&#xff0c;输出下面语句 */printf("a 小于 20\n");}printf("a 的值是 %d\n", a);return 0; } 执行结果是&#xff1a;…

蓝桥杯time模块常用操作

#导入time模块import time #获取时间戳 start_time time.time () print ( "start_time ", start_time) time .sleep ( 3) end_time time.time () print ( "end_time ", end_time)#计算运行时间 print("运行时间 { :.0f } ".format(end_time …

(已解决)如何使用matplotlib绘制小提琴图

网上很多人使用seaborn绘制小提琴图&#xff0c;本人暂时不想学新的东西&#xff0c;就是懒。本文介绍如何使用matplotlib绘制小提琴图&#xff0c;很多其他博客只是使用最简单的语法&#xff0c;默认小提琴颜色会是蓝色&#xff0c;根本改不了。本文使用了一点高级的用法&…

DataFunSummit:2023年数据平台架构峰会-核心PPT资料下载

一、峰会简介 一、数据平台架构的发展趋势 随着数字化转型的加速&#xff0c;数据平台架构的发展趋势越来越明显。在本次峰会上&#xff0c;与会者讨论了数据平台架构的未来发展方向&#xff0c;包括云原生、微服务、分布式等。这些趋势将对企业数据平台架构产生深远影响&…

springcloud:对象存储组件MinIO

类似于FastDFS/HDFS的一个文件存储服务&#xff01; SpringBoot整合MinIO实现分布式文件服务&#xff01; #MinIO简介&#xff1f; Minio 是个基于 Golang 编写的开源对象存储套件&#xff0c;基于Apache License v2.0开源协议&#xff0c;虽然轻量&#xff0c;却拥有着不错的…

python requests最全使用指南

文章目录 前言安装 ReuqestsHTTP 简介什么是 HTTPHTTP工作原理HTTP的9种请求方法HTTP状态码 requests 快速上手requests 发起请求的步骤requests 发起请求的两种方式请求参数发起 GET 请求发起 POST 请求 requests 实战登录接口的测试获取用户信息接口的测试对响应结果的处理&a…

如何写出高效的软件测试用例?

编写测试用例的目的就是确保测试过程全面高效、有据可查。所以测试用例非常重要&#xff0c;但要编写出高效的测试用例&#xff0c;需要搞清楚什么是测试用例&#xff0c;以及如何编写出高效的测试用例&#xff1f;接下来将从以下几个部分来进行展开 1、什么是测试用例 2、如何…

D35|整数拆分+不同的二叉搜索树

96.不同的二叉搜索树 初始思路&#xff1a; 一开始需要推导递推公式也就是需要找规律&#xff1a; 我认为的规律是 dp[0] 1; dp[1] 1; dp[2] 2; dp[3] dp[2]dp[1]xdp[1]dp[2]5; dp[4] dp[3]dp[2]xdp[1]dp[1]xdp[2]dp[3]; dp[5] dp[4]dp[1]xdp[3]dp[2]xdp[2]dp[3…