什么是同源策略?

同源

同源指的是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/233873.shtml

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

相关文章

手机端升级ChatGPT失败怎么办?解决方案

昨天一个朋友说他手机端升级失败如下图 其实手机端对IP环境要求更严格&#xff0c;升级失败很正常&#xff0c;解决办法就是使用电脑端就可以了&#xff0c;电脑端对IP环境相对来说没有手机那么严格 不管手机电脑&#xff0c;都要用最纯净的IP才行&#xff0c;如果不行&#xf…

MyBatis——MyBatis的CRUD(增删改查)

1.MyBatis的CRUD 创建工程&#xff1a; 1.1.查询 1.1.1.单个参数绑定 //单个参数传递public User findUserById(Integer id);<!--parameterType:指定输入参数的类型resultType&#xff1a;指定数据结果封装的数据类型#{id}&#xff1a;它代表占位符&#xff0c;相当于原来…

大数据讲课笔记5.1 初探MapReduce

文章目录 零、学习目标一、导入新课二、新课讲解&#xff08;一&#xff09;MapReduce核心思想&#xff08;二&#xff09;MapReduce编程模型&#xff08;三&#xff09;MapReduce编程实例——词频统计思路1、Map阶段&#xff08;映射阶段&#xff09;2、Reduce阶段&#xff08…

【Java异常】idea 报错:无效的目标发行版:17 的解决办法

【Java异常】idea 报错&#xff1a;无效的目标发行版&#xff1a;17 的解决办法 一&#xff0c;问题来源 springcloud的第一个demo项目就给我干趴了 二、原因分析 java: 无效的目标发行版: 17 原因就是 JDK 版本不对。从 IDEA 编辑器中可以找到问题的原因所在&#xff0c;…

ImportError: cannot import name ‘calcsize‘ from ‘struct‘解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…

英文表示数字_分支结构 C语言xdoj146

题目描述&#xff1a;输入一个0~9的一位整数&#xff0c;输出其对应的英文单词。要求用switch结构完成。 示例&#xff1a; 输入&#xff1a;0 输出&#xff1a;zero 输入&#xff1a;8 输出&#xff1a;eight #include <stdio.h>//英文表示数字_分支结构 int main() {in…

爬虫中scrapy模块的概念作用和工作流程

scrapy的概念和流程 学习目标&#xff1a; 了解 scrapy的概念了解 scrapy框架的作用掌握 scrapy框架的运行流程掌握 scrapy中每个模块的作用 1. scrapy的概念 Scrapy是一个Python编写的开源网络爬虫框架。它是一个被设计用于爬取网络数据、提取结构性数据的框架。 Scrapy 使…

状态管理之复杂对象

前面我们学习的State、Prop、Link、Provide、Consume这些装饰器都只能更新对象的直接赋值、对象属性赋值&#xff1b;如果对象的属性又是一个对象&#xff0c;也就是嵌套对象&#xff0c;那么对嵌套对象的属性的更新是不会被观察到的&#xff0c;所以复杂状态管理用于解决该问题…

前后端分离跨域问题的OPTIONS请求

本篇文章用于个人的问题记录 问题描述: 使用了springbootvue3做前后端分离,使用sa-token做登录认证 由于sa-token的前后端分离的登录认证需要在请求发起时自定义添加头部satoken 好那么问题来了,我请求的时候看我的请求头是存在satoken这个头部信息的 但我在springboot的拦截…

【sprintboot+vue3】解决前后端分离项目遇到的问题

目录 一、Access to XMLHttpRequest at http://127.0.0.1:8088/api/hello from origin http://localhost:5173 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource. 二、报错[vue/compiler-sfc] 一、Access to …

uniapp笔记

/pages/component/swiper/swiper /pages/component/button/button navigator image 设置界面标题 页面跳转 设置TabBar 发起一个请求 网络请求

明理信息科技打造专属个人或企业知识付费平台,核心功能设计

在当今信息爆炸的时代&#xff0c;知识管理已经成为了每个人必须面对的问题。然而&#xff0c;市面上的知识付费平台大多数都是通用的&#xff0c;无法满足个性化需求。 因此&#xff0c;明理信息科技提供了一款专属定制的适合个人的知识付费平台。核心产品能力如下&#xff1…

画图之C4架构图idea和vscode环境搭建篇

VS Code 下C4-PlantUML安装 安装VS Code 直接官网下载安装即可,过程略去。 安装PlantUML插件 在VS Code的Extensions窗口中搜索PlantUML,安装PlantUML插件。 配置VS Code代码片段 安装完PlantUML之后,为了提高效率,我们最好安装PlantUML相关的代码片段。 打开VS Cod…

Java精品项目源码新基于协同过滤算法的旅游推荐系统(编号V69)

Java精品项目源码新基于协同过滤算法的旅游推荐系统(编号V69) 大家好&#xff0c;小辰今天给大家介绍一个基于协同过滤算法的旅游推荐系统

WPF Halcon机器视觉和运动控制软件通用框架,插件式开发,开箱即用 仅供学习!

点我下载&#xff0c;仅供个人学习使用 参考easyvision开发&#xff0c;集成几十个软件算子此版本以添加ui设计器。具体功能如上所示&#xff0c;可以自定义变量&#xff0c;写c#脚本&#xff0c;自定义流程&#xff0c;包含了halcon脚本和封装的算子&#xff0c;可自定义ui&a…

MySQL的增删改查(进阶)--上

1. 数据库约束 1.1 约束类型 NOT NULL - 指示某列不能存储 NULL 值。 UNIQUE - 保证某列的每行必须有唯一的值。 DEFAULT - 规定没有给列赋值时的默认值。 PRIMARY KEY - NOT NULL 和 UNIQUE 的结合。确保某列&#xff08;或两个列多个列的结合&#xff09;有唯一标识&#xf…

需要token的原因----

需要token的原因主要有以下几点&#xff1a; 安全性&#xff1a;Token的使用可以增强用户信息的安全性。在用户向服务端请求数据时&#xff0c;服务端需要通过数据库来判断用户名和密码是否正确&#xff0c;以确定是否提供所需内容。Token作为一层额外的验证&#xff0c;可以验…

2023中国品牌节金谱奖荣誉发布 酷开科技获颁OTT行业科技创新奖

11月17日—19日&#xff0c;以“复苏与腾飞”为主题的2023第十七届中国品牌节&#xff0c;在杭州市云栖小镇国际会展中心成功举行。在18日晚间的荣耀盛典上&#xff0c;“TopBrand 2023中国品牌节金谱奖”荣誉发布&#xff0c;酷开科技斩获OTT行业科技创新奖。 酷开科技作为OTT…

2023/12/19 work

1. 基于UDP的TFTP文件传输 #include <stdio.h> #include <string.h> #include <stdlib.h> #include <myhead.h>//实现下载功能 int do_download(int cfd, struct sockaddr_in sin) {//定义变量存储下载请求包char buf[516] "";//定义变量存…

工作服穿戴监测识别摄像机

工作服穿戴监测识别摄像机是一种通过图像识别技术&#xff0c;实时监测和识别工作场所穿戴的工作服是否符合要求的设备。它可以有效地监测员工是否穿戴了正确的工作服&#xff0c;提高工作场所的安全性和管理效率。 这种摄像机利用先进的计算机视觉技术&#xff0c;能够快速准确…