跨域 同源策略通俗讲解

什么是跨域

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

怎么区分不同的域

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

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


跨域问题的解决方案:

CORS跨域资源共享

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

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

浏览器处理到这个响应时

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

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

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

缺点:

1 需要后端配合

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

相关推荐
星离~2 分钟前
Vue响应式原理详解:从零实现一个迷你Vue
前端·javascript·vue.js
G探险者26 分钟前
为什么 VARCHAR(1000) 存不了 1000 个汉字? —— 详解主流数据库“字段长度”的底层差异
数据库·后端·mysql
百锦再31 分钟前
第18章 高级特征
android·java·开发语言·后端·python·rust·django
梦65036 分钟前
React 简介
前端·react.js·前端框架
一只小阿乐37 分钟前
react 中的判断显示
前端·javascript·vue.js·react.js·react
光影少年40 分钟前
useMemo 和 React.memo区别
前端·react.js·前端框架
小沐°40 分钟前
React-页码组件
前端·javascript·react.js
零一科技43 分钟前
Vue3学习第三课: ref 与 reactive 选择指南
前端·vue.js
Tony Bai1 小时前
Go 在 Web3 的统治力:2025 年架构与生态综述
开发语言·后端·架构·golang·web3
程序猿20231 小时前
项目结构深度解析:理解Spring Boot项目的标准布局和约定
java·spring boot·后端