跨域 同源策略通俗讲解

什么是跨域

字面理解,前后端不"同源",这就发生了跨域

怎么区分不同的域

域的组成:协议+域名+端口

同源策略:浏览器的一种安全机制。目的是保证限制前端请求的读取能力,防止恶意网站随意对我们浏览器数据进行读取,造成数据泄露


跨域问题的解决方案:

CORS跨域资源共享

当一个请求发送跨域时,浏览器会给这个请求的请求头加上origin,确定请求来源,相当于自报家门。

后端处理到这个请求时 设置一些字段返回响应

浏览器处理到这个响应时

通过Access-Control-Allow_origin 判断哪些请求源可以访问

通过Access-Control-Allow_Methods 判断哪些请求方法可以访问

通过Access-Control-Allow_Headers 判断哪些请求头可以访问

缺点:

1 需要后端配合

2 非简单请求会导致预检请求,额外发送一次HTTP请求

相关推荐
神奇小汤圆2 分钟前
告别“大泥球”:我在 Spring Boot 单体架构中实践的模块化隔离
后端
长大19883 分钟前
Python 新手最容易踩的 10 个语法坑
后端
二月龙5 分钟前
Python 迭代器与生成器精讲:大幅降低内存占用
后端
lichenyang45317 分钟前
把 demo 里的 console.log 全换成 HiLog:从 %{private} 没脱敏的困惑说起
前端
光影少年21 分钟前
组件复用:HOC、Render Props、自定义Hook 对比
前端·react.js·掘金·金石计划
Gauss松鼠会25 分钟前
【GaussDB】GaussDB SMP特性调优详解
java·服务器·前端·数据库·sql·算法·gaussdb
葬送的代码人生30 分钟前
JavaScript 数组完全指南:从入门到实战
前端·javascript·算法
用户9385156350732 分钟前
深入理解 JavaScript 同步与异步:从单线程到事件循环与 Promise
前端·javascript
搬砖的码农32 分钟前
造一个 Agent 运行时 #01:我决定开干,顺便把坑都写下来
前端·agent·ai编程
AINative软件工程33 分钟前
Tool Schema 写得好,模型少出错:5 个工程师必知的设计原则
后端·openai