跨域问题和解决方案
跨域问题及解决方案
同源策略及跨域问题
同源策略是一套浏览器安全机制,当一个源的文档和脚本,与另一个源的资源进行通信时,同源策略就会对这个通信做出不同程度的限制。
简单来说,同源策略对 同源资源 放行,对 异源资源 限制
因此限制造成的开发问题,称之为跨域(异源)问题
同源和异源
源(origin) = 协议 + 域名 + 端口
例如:
https://study.duyiedu.com/api/movie
的源为https://study.duyiedu.com
http://localhost:7001/index.html
的源为http://localhost:7001
两个URL地址的源完全相同,则称之为同源,否则称之为异源(跨域)
跨域出现的场景
跨域可能出现在三种场景:
-
网络通信
a元素的跳转;加载css、js、图片等;AJAX等等
-
JS API
window.open
、window.parent
、iframe.contentWindow
等等 -
存储
WebStorage
、IndexedDB
等等
对于不同的跨域场景,以及每个场景中不同的跨域方式,同源策略都有不同的限制。
本文重点讨论网络通信中AJAX
的跨域问题
网络中的跨域
当浏览器运行页面后,会发出很多的网络请求,例如CSS、JS、图片、AJAX等等
请求页面的源称之为页面源,在该页面中发出的请求称之为目标源。
当页面源和目标源一致时,则为同源请求,否则为异源请求(跨域请求)
浏览器如何限制异源请求?
浏览器出于多方面的考量,制定了非常繁杂的规则来限制各种跨域请求,但总体的原则非常简单:
- 对标签发出的跨域请求轻微限制
- 对AJAX发出的跨域请求严厉限制
解决方案
CORS
CORS(Cross-Origin Resource Sharing)是最正统的跨域解决方案,同时也是浏览器推荐的解决方案。
CORS是一套规则,用于帮助浏览器判断是否校验通过。
CORS的基本理念是:
- 只要服务器明确表示允许,则校验通过
- 服务器明确拒绝或没有表示,则校验不通过
所以,使用CORS解决跨域,必须要保证服务器是「自己人」
请求分类
CORS将请求分为两类:简单请求和预检请求。
对不同种类的请求它的规则有所区别。
所以要理解CORS,首先要理解它是如何划分请求的。
简单请求
完整判定逻辑:https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#simple_requests
简单来说,只要全部满足下列条件,就是简单请求:
-
请求方法是
GET
、POST
、HEAD
之一 -
头部字段满足CORS安全规范,详见 W3C
浏览器默认自带的头部字段都是满足安全规范的,只要开发者不改动和新增头部,就不会打破此条规则
-
如果有
Content-Type
,必须是下列值中的一个text/plain
multipart/form-data
application/x-www-form-urlencoded
预检请求(preflight)
只要不是简单请求,均为预检请求
练习
// 下面的跨域请求哪些是简单请求,哪些是预检请求// 1
fetch('https://douyin.com');// 2
fetch('https://douyin.com', {headers: {a: 1,},
});// 3
fetch('https://douyin.com', {method: 'POST',body: JSON.stringify({ a: 1, b: 2 }),
});// 4
fetch('https://douyin.com', {method: 'POST',headers: {'content-type': 'application/json',},body: JSON.stringify({ a: 1, b: 2 }),
});
对简单请求的验证
对预检请求的验证
- 发送预检请求
- 发送真实请求(和简单请求一致)
细节1 - 关于cookie
默认情况下,ajax的跨域请求并不会附带cookie,这样一来,某些需要权限的操作就无法进行
不过可以通过简单的配置就可以实现附带cookie
// xhr
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;// fetch api
fetch(url, {credentials: "include"
})
这样一来,该跨域的ajax请求就是一个附带身份凭证的请求
当一个请求需要附带cookie时,无论它是简单请求,还是预检请求,都会在请求头中添加cookie
字段
而服务器响应时,需要明确告知客户端:服务器允许这样的凭据
告知的方式也非常的简单,只需要在响应头中添加:Access-Control-Allow-Credentials: true
即可
对于一个附带身份凭证的请求,若服务器没有明确告知,浏览器仍然视为跨域被拒绝。
另外要特别注意的是:对于附带身份凭证的请求,服务器不得设置 Access-Control-Allow-Origin 的值为*
。这就是为什么不推荐使用*的原因
细节2 - 关于跨域获取响应头
在跨域访问时,JS只能拿到一些最基本的响应头,如:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma,如果要访问其他头,则需要服务器设置本响应头。
Access-Control-Expose-Headers
头让服务器把允许浏览器访问的头放入白名单,例如:
Access-Control-Expose-Headers: authorization, a, b
这样JS就能够访问指定的响应头了。
JSONP
在很久很久以前…并没有CORS方案
在那个年代,古人靠着非凡的智慧来解决这一问题
虽然可以解决问题,但JSONP有着明显的缺陷:
-
仅能使用GET请求
-
容易产生安全隐患
恶意攻击者可能利用
callback=恶意函数
的方式实现XSS
攻击 -
容易被非法站点恶意调用
因此,除非是某些特殊的原因,否则永远不应该使用JSONP
代理
CORS和JSONP均要求服务器是「自己人」
那如果不是呢?
那就找一个中间人(代理)
比如,前端小王想要请求获取王者荣耀英雄数据,但直接请求腾讯服务器会造成跨域
由于腾讯服务器不是「自己人」,小王决定用代理解决
如何选择
最重要的,是要保持生产环境和开发环境一致
下面是一张决策图
具体的几种场景
相关文章:
跨域问题和解决方案
跨域问题及解决方案 同源策略及跨域问题 同源策略是一套浏览器安全机制,当一个源的文档和脚本,与另一个源的资源进行通信时,同源策略就会对这个通信做出不同程度的限制。 简单来说,同源策略对 同源资源 放行,对 异源…...
springboot中路径默认配置与重定向/转发所存在的域对象
Spring Boot 是一种简化 Spring 应用开发的框架,它提供了多种默认配置和方便的开发特性。在 Web 开发中,路径配置和请求的重定向/转发是常见操作。本文将详细介绍 Spring Boot 中的路径默认配置,并解释重定向和转发过程中存在的域对象。 一、…...
【OS】AUTOSAR架构下的Interrupt详解(下篇)
目录 3.代码分析 3.1中断配置代码 3.2 OS如何找到中断处理函数 3.3 Os_InitialEnableInterruptSources实现 3.4 Os_EnableInterruptSource 3.5 DisableAllInterrupts 3.5.1Os_IntSuspendCat1 3.5.2 Os_InterruptDisableAllEnter 3.5.3 Disable二类中断 3.5.4 Disable一…...
基于遗传算法的256QAM星座图的最优概率整形matlab仿真,对比优化前后整形星座图和误码率
目录 1.算法仿真效果 2.算法涉及理论知识概要 3.MATLAB核心程序 4.完整算法代码文件获得 1.算法仿真效果 matlab2022a仿真结果如下(完整代码运行后无水印): GA优化曲线: 优化前后星座图对比 优化前后误码率对比 仿真操作步骤…...
Android学习21 -- launcher
1 前言 之前在工作中,第一次听到launcher有点蒙圈,不知道是啥,当时还赶鸭子上架去和客户PK launcher的事。后来才知道其实就是安卓的桌面。本来还以为很复杂,毕竟之前接触过windows的桌面,那叫一个复杂。。。 后面查了…...
小程序越来越智能化,作为设计师要如何进行创新设计
一、用户体验至上 (一)简洁高效的界面设计 小程序的特点之一是轻便快捷,用户期望能够在最短的时间内找到所需功能并完成操作。因此,设计师应致力于打造简洁高效的界面。避免过多的装饰元素和复杂的布局,采用清晰的导航…...
【实践案例】基于大语言模型的海龟汤游戏
文章目录 项目背景提示词构建海龟汤主持人真相判断专家 具体实现流程文心一言大语言模型“海龟汤”插件参考 项目背景 “海龟汤”作为一种聚会类桌游,又称情境推理游戏,是一种猜测情境还原事件真相的智力游戏。其玩法是由出题者提出一个难以理解的事件&…...
基于多智能体强化学习的医疗AI中RAG系统程序架构优化研究
一、引言 1.1 研究背景与意义 在数智化医疗飞速发展的当下,医疗人工智能(AI)已成为提升医疗服务质量、优化医疗流程以及推动医学研究进步的关键力量。医疗 AI 借助机器学习、深度学习等先进技术,能够处理和分析海量的医疗数据,从而辅助医生进行疾病诊断、制定治疗方案以…...
【Unity2D 2022:UI】创建滚动视图
一、创建Scroll View游戏对象 在Canvas画布下新建Scroll View游戏对象 二、为Content游戏对象添加Grid Layout Group(网格布局组)组件 选中Content游戏物体,点击Add Competent添加组件,搜索Grid Layout Group组件 三、调整Grid La…...
C++ Primer 多维数组
欢迎阅读我的 【CPrimer】专栏 专栏简介:本专栏主要面向C初学者,解释C的一些基本概念和基础语言特性,涉及C标准库的用法,面向对象特性,泛型特性高级用法。通过使用标准库中定义的抽象设施,使你更加适应高级…...
怀旧经典:1200+款红白机游戏合集,Windows版一键畅玩
沉浸在怀旧的海洋中,体验经典红白机游戏的魅力!我们为您精心准备了超过1200款经典游戏的合集,每一款都是时代的印记,每一场都是回忆的旅程。这个合集不仅包含了丰富的游戏资源,还内置了多个Windows版的NES模拟器&…...
【数据采集】案例02:基于Selenium采集豆瓣电影Top250的详细数据
基于Selenium采集豆瓣电影Top250的详细数据 Selenium官网:https://www.selenium.dev/blog/ 豆瓣电影Top250官网:https://movie.douban.com/top250 写在前面 实验目标:基于Selenium框架采集豆瓣电影Top250的详细数据。 电脑系统:Windows 使用软件:PyCharm、Navicat 技术需求…...
Spring 面试题【每日20道】【其二】
1、Spring MVC 具体的工作原理? 中等 Spring MVC 是 Spring 框架的一部分,专门用于构建基于Java的Web应用程序。它采用模型-视图-控制器(MVC)架构模式,有助于分离应用程序的不同方面,如输入逻辑、业务逻辑…...
算法设计-0-1背包动态规划(C++)
一、问题阐述 0-1 背包问题的目标是在给定背包容量 W 的情况下,从 n 个物品中选择一些物品放入背包,使得背包中物品的总价值最大。每个物品只能选择一次(即要么放入背包,要么不放入)。 二、代码 #include <iostr…...
【Java知识】使用Java实现地址逆向解析到区划信息
文章目录 1. 实现 FST1.1 定义 FST 节点1.2 定义 FST 2. 实现地址逆向查询2.1 定义区划信息2.2 构建 FST 3. 运行结果4. 代码说明5. 进一步优化6. 总结 实现一个 FST(Finite State Transducer,有限状态转换器) 并用于 地址逆向查询区划信息…...
单机伪分布Hadoop详细配置
目录 1. 引言2. 配置单机Hadoop2.1 下载并解压JDK1.8、Hadoop3.3.62.2 配置环境变量2.3 验证JDK、Hadoop配置 3. 伪分布Hadoop3.1 配置ssh免密码登录3.2 配置伪分布Hadoop3.2.1 修改hadoop-env.sh3.2.2 修改core-site.xml3.2.3 修改hdfs-site.xml3.2.4 修改yarn-site.xml3.2.5 …...
[250204] Mistral Small 3:小巧、快速、强大 | asdf 0.16.0 发布:Golang 重写带来性能飞跃
目录 Mistral AI 发布开源模型 Mistral Small 3:小巧、快速、强大asdf 0.16.0 版本发布:Golang 重写带来性能飞跃! Mistral AI 发布开源模型 Mistral Small 3:小巧、快速、强大 法国人工智能初创公司 Mistral AI 发布了最新的开源…...
解读“大语言模型(LLM)安全性测评基准”
1. 引入 OWASP,全称为Open Web Application Security Project,即开放式Web应用程序安全项目,是一个致力于提高软件安全性的非营利国际组织。 由于庞大的规模和复杂的结构,大语言模型也存在多种安全风险,如prompt误导…...
可视化相机pose colmap形式的相机内参外参
目录 内参外参转换 可视化相机pose colmap形式的相机内参外参 内参外参转换 def visualize_cameras(cameras, images):fig plt.figure()ax fig.add_subplot(111, projection3d)for image_id, image_data in images.items():qvec image_data[qvec]tvec image_data[tvec]#…...
从0开始使用面对对象C语言搭建一个基于OLED的图形显示框架(基础图形库实现)
目录 基础图形库的抽象 抽象图形 抽象点 设计我们的抽象 实现我们的抽象 测试 抽象线 设计我们的抽象 实现我们的抽象 绘制垂直的和水平的线 使用Bresenham算法完成任意斜率的绘制 绘制三角形和矩形 矩形 三角形 实现 绘制圆,圆弧和椭圆 继续我们的…...
python学opencv|读取图像(五十三)原理探索:使用cv.matchTemplate()函数实现最佳图像匹配
【1】引言 前序学习进程中,已经探索了使用cv.matchTemplate()函数实现最佳图像匹配的技巧,并且成功对两个目标进行了匹配。 相关文章链接为:python学opencv|读取图像(五十二)使用cv.matchTemplate()函数实现最佳图像…...
4 前端前置技术(上):AJAX技术(前端发送请求)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言 前言...
python的ruff简单使用
Ruff 是一个用 Rust 编写的高性能 Python 静态分析工具和代码格式化工具。它旨在提供快速的代码检查和格式化功能,同时支持丰富的配置选项和与现有工具的兼容性。ruff是用rust实现的python Linter&Formatter。 安装: conda install -c conda-forge…...
windows环境下如何在PyCharm中安装软件包
windows环境下如何在pyCharm中安装wxPython软件包 在windows环境中,安装软件包可以使用 终端 的方式,在IDE下方的终端中执行pip install wxPython进行安装,安装完毕之后,使用pip show wxPython检查也符合预期。 但是在代码文件中导…...
【LLM-agent】(task2)用llama-index搭建AI Agent
note LlamaIndex 实现 Agent 需要导入 ReActAgent 和 Function Tool,循环执行:推理、行动、观察、优化推理、重复进行。可以在 arize_phoenix 中看到 agent 的具体提示词,工具被装换成了提示词ReActAgent 使得业务自动向代码转换成为可能&am…...
Deep Crossing:深度交叉网络在推荐系统中的应用
实验和完整代码 完整代码实现和jupyter运行:https://github.com/Myolive-Lin/RecSys--deep-learning-recommendation-system/tree/main 引言 在机器学习和深度学习领域,特征工程一直是一个关键步骤,尤其是对于大规模的推荐系统和广告点击率预…...
介绍一下Mybatis的Executor执行器
Executor执行器是用来执行我们的具体的SQL操作的 有三种基本的Executor执行器: SimpleExecutor简单执行器 每执行一次update或select,就创建一个Statement对象,用完立刻关闭Statement对象 ReuseExecutor可重用执行器 可重复利用Statement…...
pthread_cond_broadcast的概念和使用案例
pthread_cond_broadcast 是 POSIX 线程(Pthreads)库中用于条件变量(Condition Variable)操作的函数,定义在 <pthread.h> 头文件中。它的核心作用是唤醒所有等待在某个条件变量上的线程,通常用于多线程…...
数据中心服务器对PCIe测试的需求、挑战和应用
人工智能和机器学习技术的迅猛发展,尤其是大语言模型(LLM)的兴起,对计算资源和数据传输速度提出了更高的要求,从而激发了对更高带宽解决方案的迫切需求。PCIe作为数据中心服务器间互联的主力军,承担着高速数…...
SpringBoot的配置(配置文件、加载顺序、配置原理)
文章目录 SpringBoot的配置(配置文件、加载顺序、配置原理)一、引言二、配置文件1、配置文件的类型1.1、配置文件的使用 2、多环境配置 三、加载顺序四、配置原理五、使用示例1、配置文件2、配置类3、控制器 六、总结 SpringBoot的配置(配置文件、加载顺序、配置原理) 一、引言…...
利用Vue和javascript分别编写一个“Hello World”的定时更新
目录 一、利用Vue编写一个“Hello World”的定时更新(1)vue编码在Html文件中(2)vue编码在js文件中 二、利用javascript编写一个“Hello World”的定时更新 一、利用Vue编写一个“Hello World”的定时更新 (1ÿ…...
【免费】2007-2019年各省科技支出占一般公共预算支出的比重数据
2007-2019年各省科技支出占一般公共预算支出的比重数据 1、时间:2007-2019年 2、来源:国家统计局、统计年鉴 3、指标:行政区划代码、地区名称、年份、科技支出占一般公共预算支出的比重 4、范围:31省 5、指标解释:…...
解决 LeetCode 922 题:按奇偶排序数组 II
解决 LeetCode 922 题:按奇偶排序数组 II 题目描述 给定一个非负整数数组 nums,其中一半整数是奇数,一半整数是偶数。要求对数组进行排序,以便当 nums[i] 为奇数时,i 也是奇数;当 nums[i] 为偶数时&#…...
【PyQt】getattr动态访问对象的属性
问题 使用qtdesigner设计好大体的软件结构,需要使用代码进行批量修改控件样式,self.ui.x 会被解释为访问 self.ui 中名为 x 的属性,而不是将 x 作为变量名来解析,此时需要通过字符串动态访问 self.ui 中的按钮对象 for i in range(20):x f…...
基于RTOS的STM32游戏机
1.游戏机的主要功能 所有游戏都来着B站JL单片机博主开源 这款游戏机具备存档与继续游戏功能,允许玩家在任何时候退出当前游戏并保存进度,以便日后随时并继续之前的冒险。不仅如此,游戏机还支持多任务处理,玩家可以在退出当前游戏…...
< 自用文儿 > 下载 MaxMind GeoIP Databases 对攻击的 IP 做 地理分析
起因 两个 VPM/VPS,安装了 fail2ban 去拦截密码穷举攻击。每天的记录都在增长,以前复制屏幕输出就行,一屏的内容还容易粘贴出来的。昨天已经过 500 条,好奇 fail2ban 是如何存储这些内容的?就发现它在使用 SQLite3 数…...
kubernetes 核心技术-集群安全机制 RBAC
随着 Kubernetes 在企业级应用中的广泛采用,确保集群的安全性变得至关重要。Kubernetes 提供了多种安全机制来保护集群及其资源免受未授权访问和潜在威胁的影响。其中,基于角色的访问控制(Role-Based Access Control, 简称 RBAC)是…...
排序算法--快速排序
快速排序是高效的排序算法,平均时间复杂度为 O(nlogn),适合大规模数据排序。 1.挖坑法 2左右指针法 3.前后指针法 // 交换两个元素的值 void swap(int* a, int* b) {int temp *a;*a *b;*b temp; }// 分区函数,返回分区点的索引 int par…...
npm知识
npm 是什么 npm 为你和你的团队打开了连接整个 JavaScript 天才世界的一扇大门。它是世界上最大的软件注册表,每星期大约有 30 亿次的下载量,包含超过 600000 个包(package)(即,代码模块)。来自…...
雷电等基于VirtualBox的Android模拟器映射串口和测试CSerialPort串口功能
雷电等基于VirtualBox的Android模拟器映射串口和测试CSerialPort串口功能 1. 修改VirtualBox配置文件映射串口 模拟器配置文件vms/leidian0/leidian.vbox。 在UART标签下增加(修改完成后需要将leidian.vbox修改为只读) <Port slot"1" enabled"true"…...
http请求中的headers和body内容设置
1.headers 1.1 内容相关 headers {Content-Type: application/json, # 或 application/x-www-form-urlencoded, multipart/form-dataContent-Length: 1234, # 内容长度Accept: application/json, # 期望的返回格式Accept-Encoding: gzip, deflate, # 支持的压缩方式Acce…...
Python语言的安全开发
Python语言的安全开发 引言 在信息技术迅速发展的今天,网络安全问题愈发凸显。随着Python语言的广泛应用,尤其是在数据分析、人工智能、Web开发等领域,其安全问题越来越受到重视。Python作为一门高效且易于学习的编程语言,虽然在…...
[LeetCode]day13 19.删除链表的倒数第n个结点
19. 删除链表的倒数第 N 个结点 - 力扣(LeetCode) 题目描述 给你一个链表,删除链表的倒数第 n 个结点,并且返回链表的头结点。 示例 1: 输入:head [1,2,3,4,5], n 2 输出:[1,2,3,5]示例 2&a…...
进程的环境变量
export MUDUO_LOG_DEBUG1 ./testif (::getenv("MUDUO_LOG_TRACE"))return true;有时在程序运行前,我们希望设置环境变量。此处::表示全局命名空间。 在类 Unix 系统(如 Linux、macOS)中,环境变量并不直接存储在堆、栈或…...
《深度揭秘LDA:开启人工智能降维与分类优化的大门》
在当今人工智能蓬勃发展的时代,数据成为了驱动技术进步的核心要素。随着数据采集和存储技术的飞速发展,我们所面临的数据量不仅日益庞大,其维度也愈发复杂。高维数据虽然蕴含着丰富的信息,但却给机器学习算法带来了一系列严峻的挑…...
UE编辑器工具
如何自己制作UE小工具提高工作效率 在虚幻编辑器用户界面中,可以使用各种各样的可视化工具来设置项目,设计和构建关卡,创建游戏性交互等等。但有些时候,当你确定了需要编辑器执行的操作后,可能想要通过编程方式调用它…...
.找到字符串中所有字母异位词(滑动窗口)
给定两个字符串 s 和 p,找到 s 中所有 p 的 异位词 的子串,返回这些子串的起始索引。不考虑答案输出的顺序。 示例 1: 输入: s "cbaebabacd", p "abc" 输出: [0,6] 解释: 起始索引等于 0 的子串是 "cba", 它是 "…...
力扣 121. 买卖股票的最佳时机
🔗 https://leetcode.cn/problems/best-time-to-buy-and-sell-stock 题目 nums 表示连续几天的股票价格,返回最大利润 思路 贪心,模拟 代码 class Solution { public:int maxProfit(vector<int>& prices) {int ans 0;int mi…...
c++ 冒泡排序
c 冒泡排序 冒泡排序是一种简单的排序算法,它通过重复遍历待排序的数列,比较每对相邻元素的大小,并在必要时交换它们的位置。这个过程会一直进行,直到没有需要交换的元素为止,这意味着数列已经排序完成。以下是用C实现…...
JMeter的详细学习路线
以下是一个适合新手的 **JMeter 详细学习路线**,从基础到实战逐步深入,帮助你系统掌握 JMeter 的核心功能和使用技巧。 --- ### **一、入门阶段:理解基础概念** 1. **了解性能测试基础** - 什么是性能测试? - 负载测…...