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是允许的请求方式 

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

相关实践学习
基于函数计算快速搭建Hexo博客系统
本场景介绍如何使用阿里云函数计算服务命令行工具快速搭建一个Hexo博客。
目录
相关文章
|
8月前
|
存储 JavaScript Java
|
8月前
|
前端开发 JavaScript
Layui之组件的基本使用及案例演示2
Layui之组件的基本使用及案例演示2
44 0
|
8月前
|
前端开发 JavaScript
Layui之组件的基本使用及案例演示1
Layui之组件的基本使用及案例演示1
48 0
|
8月前
|
JavaScript 中间件 网络架构
【vue入门手册】十一、动态路由 && 登录注册
【vue入门手册】十一、动态路由 && 登录注册
104 0
|
9月前
|
前端开发
前端学习笔记202305学习笔记第二十一天-vue3.0-项目效果的展示1
前端学习笔记202305学习笔记第二十一天-vue3.0-项目效果的展示1
39 0
|
6月前
Axure快速入门(02) - 入门例子(登录案例)
Axure快速入门(02) - 入门例子(登录案例)
36 0
|
6月前
Axure快速入门(12) -轮播图案例
Axure快速入门(12) -轮播图案例
24 0
|
8月前
|
前端开发 JavaScript API
ElementUI基本介绍及登录注册案例演示2
ElementUI基本介绍及登录注册案例演示2
102 0
|
8月前
|
JavaScript 前端开发 API
ElementUI基本介绍及登录注册案例演示1
ElementUI基本介绍及登录注册案例演示1
48 0
|
JavaScript 数据安全/隐私保护
【Vue 开发实战】实战篇 # 39:创建一个分步表单
【Vue 开发实战】实战篇 # 39:创建一个分步表单
184 0
【Vue 开发实战】实战篇 # 39:创建一个分步表单