ElementUI基本介绍及登录注册案例演示3

简介: ElementUI基本介绍及登录注册案例演示3

四.跨域问题

跨域问题(Cross-Origin Resource Sharing,CORS)是一种 Web 安全性问题,涉及到在浏览器中进行跨域请求的限制和控制。跨域问题通常发生在以下情况下:

1.不同域名之间的请求: 当一个网页试图从与其自身不同域名的服务器请求数据时,浏览器会实施跨域策略。域名是由协议(如HTTP或HTTPS)、主机(如www.example.com)、端口(如80或443)和协议的组合(https://www.example.com:443)来定义的。

2.不同端口之间的请求: 即使在相同的域名下,如果请求的端口不同,也会被视为跨域请求。

3.不同协议之间的请求: 当网页从HTTP请求HTTPS或反之的情况下,也会发生跨域问题。

CORS 通过在服务器端和客户端之间定义一组 HTTP 头来控制跨域请求的行为。以下是 CORS 的一些关键概念和控制机制:

1. 原始请求和简单请求:

原始请求(Simple Request): 如果满足一定条件,浏览器会允许跨域请求。这些条件包括使用的 HTTP 方法是一些安全方法(GET、HEAD、POST),只使用了一组安全的请求头(如Accept、Accept-Language、Content-Language、Content-Type,但仅限于 application/x-www-form-urlencoded、multipart/form-data 或 text/plain),以及没有使用自定义的请求头。

非原始请求(Preflight Request): 如果请求不符合上述条件,浏览器会首先发送一个预检请求(Preflight Request),使用 OPTIONS 方法,并包含一组特殊的请求头,以获取服务器的授权。服务器必须响应这个预检请求并指定哪些域名、方法和头部是允许的。只有在预检请求得到批准后,浏览器才会发送实际的请求。

2. 服务器端配置:

服务器端需要配置允许来自其他域的请求。这通常通过设置响应头来完成,常见的响应头包括:

Access-Control-Allow-Origin: 指定允许访问资源的域名,可以是单个域名或使用通配符 * 表示允许任何域名访问。

Access-Control-Allow-Methods: 指定允许的 HTTP 方法。

Access-Control-Allow-Headers: 指定允许的请求头。

Access-Control-Allow-Credentials: 指定是否允许发送凭证信息(如Cookies)。

Access-Control-Expose-Headers: 指定哪些响应头可以暴露给客户端。

3. 跨域资源共享的安全性:

CORS 是一种有针对性的安全措施,它允许服务器有选择性地开放资源,以避免潜在的安全风险。如果服务器配置不当,可能会导致安全漏洞。因此,服务器端需要谨慎配置 CORS 头,以确保只有受信任的域名可以访问敏感资源。

总之,CORS 是一个重要的 Web 安全机制,用于控制跨域请求,以保护用户的隐私和数据安全。了解如何正确配置服务器和客户端以支持跨域请求对于 Web 开发至关重要。

httpResponse.setHeader("Access-Control-Allow-Origin", "*");// *,任何域名
httpResponse.setHeader("Access-Control-Allow-Headers", "responseType,Origin, X-Requested-With, Content-Type, Accept");
httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
// Access-Control-Allow-Origin就是我们需要设置的域名
// Access-Control-Allow-Headers跨域允许包含的头。
// Access-Control-Allow-Methods是允许的请求方式 

今天的分享到这里就结束了,感谢各位大大的观看,各位大大的三连是博主更新的动力,感谢谢谢谢谢谢谢谢谢各位的支持!!!!!

目录
相关文章
|
SQL 前端开发 安全
Gin-Vue-Admin 使用 gin+vue 进行极速开发的全栈开发基础平台【gva 第一节】
功能: 1.增加了 pgsql 数据库初始化,用户可选用 pgsql 进行开发。 2.增加了业务数据库功能,用户可通过 yaml 中配置自己的业务数据库,根据 name 获取业务库进行业务操作,实现框架和业务的数据库分离。 3.oss 集成了华为云 oss。 4.前端打包增加了提示内存不足时的一键 node 内存扩容 build 命令。 5.调整了获取用户信息的方法,增加了不鉴权模式下的用户信息获取方式。 6.配置页面调整。 7.取消了自动化代码中数据库类型和 size 的选择模块,防止自动化代码报错。
725 0
|
JavaScript 前端开发
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
用JavaScript正则表达式匹配对应字符串高亮显示,并过滤掉空格、<、>等HTML节点符号
|
SQL 关系型数据库 MySQL
你学会如何将项目部署到Linux系统上了吗?
Linux,全称GNU/Linux,是一种免费使用和自由传播的类UNIX操作系统,其内核由林纳斯·本纳第克特·托瓦兹于1991年10月5日首次发布,它主要受到Minix和Unix思想的启发,是一个基于POSIX的多用户、多任务、支持多线程和多CPU的操作系统。它能运行主要的Unix工具软件、应用程序和网络协议。它支持32位和64位硬件。
你学会如何将项目部署到Linux系统上了吗?
|
3月前
|
机器学习/深度学习 人工智能 边缘计算
支持向量机深度解析:从数学原理到工程实践的完整指南
蒋星熠Jaxonic,机器学习实践者,痴迷于SVM的数学之美与工程应用。擅长通过核技巧解决非线性问题,在文本分类、图像识别等领域积累丰富经验。倡导理论与实践结合,致力于构建高效、可解释的AI模型。
|
Prometheus 运维 监控
解锁分布式云多集群统一监控的云上最佳实践
为应对分布式云多集群监控的挑战,阿里云可观测监控 Prometheus 版结合 ACK One,凭借高效纳管与全局监控方案有效破解了用户在该场景的监控运维痛点,为日益增长的业务需求提供了一站式、高效、统一的监控解决方案,实现成本与运维效率的双重优化。助力企业的数字化转型与业务快速增长,在复杂多变的云原生时代中航行,提供了一个强有力的罗盘与风帆。
56500 112
|
10月前
|
算法 API 数据格式
PromptScope: 一个灵活高效的In-Context Training框架
PromptScope 是一个同时支持中英文的 In-Context Training 框架,专为大型语言模型(LLM)性能调优设计。
264 6
|
监控 NoSQL 算法
Redis Sentinel(哨兵)详解
Redis Sentinel(哨兵)详解
534 4
|
JavaScript
Vue3基础(20)___Vue3配置错误路由重定向写法
本文介绍了Vue 3中配置错误路由重定向的正确写法,包括使用参数和自定义正则表达式来定义通配符路由。
251 0
Vue3基础(20)___Vue3配置错误路由重定向写法
|
存储 小程序 API
支付宝小程序:揭秘如何以低成本撬动商业价值的杠杆
【8月更文挑战第27天】支付宝小程序是阿里巴巴打造的一款轻量级应用平台,它降低了开发成本和技术门槛,简化了开发流程。用户无需下载安装即可享受快捷服务,提升了用户体验。依托支付宝庞大的用户基础,小程序能迅速触及潜在用户,降低推广成本。它不仅支持基本功能,还能无缝集成支付宝的核心服务如支付、信用等,在电商、金融等多个领域展现出独特优势。尽管存在功能限制等问题,但支付宝小程序已成为实现商业价值的重要工具。
346 1
|
监控 Java 数据库
如何在Java中实现分布式事务处理
如何在Java中实现分布式事务处理