在计算机网络中,跨域(Cross-Origin) 指的是浏览器出于安全考虑,限制网页脚本(如 JavaScript)向与当前页面不同源(Origin) 的服务器发起请求的行为。这是由浏览器的同源策略(Same-Origin Policy) 强制实施的安全机制。


核心概念详解

1. 什么是“源”(Origin)?

“源”由三部分组成:

  • 协议(Protocol):如 http://https://
  • 域名(Domain):如 example.com
  • 端口(Port):如 :80(默认端口可省略)

例如:

  • https://www.example.com:443https://www.example.com 同源(端口隐式相同)。
  • http://api.example.comhttp://www.example.com 不同源(子域名不同)。
  • https://example.comhttp://example.com 不同源(协议不同)。
2. 同源策略的限制范围

当脚本尝试访问不同源的资源时,浏览器会拦截以下操作:

  • AJAX / Fetch 请求:禁止读取跨域请求的响应(但请求可能实际已发送到服务器)。
  • WebSocket 连接:部分浏览器限制跨域 WebSocket。
  • DOM 访问:禁止通过 iframe 操作跨域页面的 DOM。
  • Cookie/LocalStorage:禁止读取跨域站点的存储数据。

为什么需要跨域限制?

  1. 防御恶意攻击

    • CSRF(跨站请求伪造):阻止恶意网站利用用户登录态伪造请求(同源策略本身不足以防 CSRF,需配合其他机制如 Token)。
    • 数据窃取:防止恶意脚本读取用户在其他站点的敏感数据(如银行页面内容)。
  2. 保护用户隐私
    避免网站通过脚本非法获取用户在其他站点的登录状态或历史记录。


如何解决跨域问题?

开发者可通过以下方式安全地实现跨域通信:

1. CORS(跨域资源共享) 🌟(主流方案)
  • 原理:服务器在响应头中声明允许哪些源访问资源。
  • 示例响应头
    Access-Control-Allow-Origin: https://www.yoursite.com  // 允许特定源
    Access-Control-Allow-Methods: GET, POST, PUT          // 允许的请求方法
    Access-Control-Allow-Headers: Content-Type            // 允许的请求头
    
  • 预检请求(Preflight):对复杂请求(如带自定义头),浏览器先发 OPTIONS 请求确认权限。
2. JSONP(JSON with Padding)(传统方案)
  • 原理:利用 <script> 标签不受同源策略限制的特性,通过回调函数获取数据。
  • 缺点:仅支持 GET 请求,安全性低(需信任服务器)。
3. 代理服务器(Proxy)
  • 原理:将跨域请求转发到同源服务器,由服务器代为请求目标资源。
  • 适用场景:前端开发中常用 webpack-dev-server 代理解决本地开发跨域。
4. WebSocket
  • 特点:不受同源策略限制,适用于双向实时通信。
5. 修改域名(同源化)
  • 将前端页面和后端 API 部署在同一域名下(如 www.example.comapi.example.com → 通过 DNS 解析为同域)。

真实场景示例

// 前端尝试请求跨域 API
fetch('https://api.weather.com/data').then(response => response.json()).catch(error => console.error('跨域请求被拦截!'));// 浏览器报错:
// Access to fetch at 'https://api.weather.com/data' from origin 'https://your-site.com'
// has been blocked by CORS policy.

解决方案
API 服务器需添加响应头:

Access-Control-Allow-Origin: https://your-site.com

重要注意事项

  • 跨域是浏览器行为:Postman、curl 等工具不受同源策略限制。
  • 简单请求 vs 预检请求:GET/POST 带标准头属于简单请求,直接发送;带自定义头会触发预检。
  • Cookie 跨域:需设置 withCredentials: true + 服务器响应 Access-Control-Allow-Credentials: true

总结

关键概念说明
同源策略浏览器安全机制,限制跨源脚本交互。
跨域触发条件协议、域名、端口任一不同即构成跨域。
解决方案CORS(推荐)、代理服务器、JSONP(过时)、WebSocket、同源化部署。
核心目标平衡功能与安全,防止恶意网站窃取数据或伪造请求。

理解跨域机制是前后端协同开发的基础,正确配置 CORS 可兼顾安全性与灵活性。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/diannao/93029.shtml
繁体地址,请注明出处:http://hk.pswp.cn/diannao/93029.shtml
英文地址,请注明出处:http://en.pswp.cn/diannao/93029.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(46)elasticsearch-华为云CCE无状态负载部署

一、准备好elasticsearch镜像并提前上传到镜像仓库 此次准备的是elasticsearch:v7.10.2 二、开始部署 负载名称:es-deployment 注意:内部配额太低会造成多次重启 环境变量: #单节点启动(实例pod可以多增加几个) discovery.type single-node 三、添加svc 四、注意:…

HCLP--MGER综合实验

一、拓扑图二、需求1、R5为ISP&#xff0c;只能进行IP地址配置&#xff0c;其所有地址均配为公有I地址; 2、R1和R5间使用PPP的PAP认证&#xff0c;R5为主认证方&#xff0c; R2与R5之间使用ppp的CHAP认证&#xff0c;R5为主认证方; R3与R5之间使用HDLc封装; 3、R1、R2、R3构建一…

idea中无法删除模块,只能remove?

1.先对module右键想要删除的module&#xff0c;选择remove module&#xff08;这是idea为了避免误操作&#xff09; 2.在remove module后&#xff0c;模块并未从项目结构中删除&#xff08;磁盘中也依旧存在&#xff09;&#xff0c;但再次右击你会发现&#xff0c;出现了del…

青藤天睿RASP再次发威!捕获E签宝RCE 0day漏洞

在2025年HVV关键攻防节点上&#xff0c;攻击队对E签宝电子合同服务发起的0day攻击被青藤天睿RASP截获。该漏洞可使攻击者在未授权情况下实现服务器远程代码执行&#xff08;RCE&#xff09;&#xff0c;进而控制服务器&#xff0c;构成横向渗透的关键跳板。>>>>漏洞…

Lua(字符串)

Lua字符串基础Lua中的字符串是不可变序列&#xff0c;可以包含任意字节数据&#xff08;包括嵌入的\0&#xff09;。字符串可以用单引号、双引号或长括号&#xff08;[[ ]]&#xff09;定义&#xff1a;str1 "Hello" str2 World str3 [[Multi-line string]]字符串…

大模型蒸馏(distillation)---从DeepseekR1-1.5B到Qwen-2.5-1.5B蒸馏

目录 1.1 蒸馏目标 2 环境准备 2.1依赖库安装 2.2 硬件要求 2.3 模型与数据集下载 2.3.1 教师模型下载 2.3.2 学生模型下载 2.3.3 数据集准备或下载 3.过程日志 4. 模型加载与配置 4.1 加载教师模型 4.2 加载学生模型 4.3 数据预处理函数 4.4 数据收集器 4.5 定义…

通过redis_exporter监控redis cluster

环境说明&#xff1a; 现在有一套redis cluster&#xff0c;部署是3主机6实例架构部署。需要采集对应的指标&#xff0c;满足异常监控告警&#xff0c;性能分析所需。 环境准备 以下环境需要提前部署完成。 redis cluser prometheus alertmanager grafna redis_exporter部署 我…

第二十天(正则表达式与功能实际运用)

在程序员一生的工作中&#xff0c;遇到的最多的数据就是字符串字符串里面很有可能有很多的不需要的信息我们需要从中间挑选出我们需要的如果循环去写&#xff0c;比较简单的时候问题不大规则多了&#xff0c;你的工作量会成倍上升的为了解决这个问题 ---- 正则表达式正则表达式…

0基础法考随手笔记 03(刑诉05 刑事证据与证明+06 强制措施)

1.如何区分书证和电子数据 书面材料是否为书证&#xff1f;→ 看内容是否直接源于案件事实&#xff08;不是 “记录别人陈述” 的载体&#xff09;。 证据清单是否为证据&#xff1f;→ 看谁做的清单&#xff08;侦查人员做的勘查笔录是证据&#xff0c;当事人做的目录不是&…

资产负债表及其数据获取

文章目录资产负债表及其数据获取资产负债表资产负债表在股票投资中的意义AKShare中的资产负债表数据接口&#xff08;深沪为例&#xff09;接口描述调用示例总结资产负债表及其数据获取 资产负债表 资产负债表&#xff08;Balance Sheet&#xff09;是反映企业在某一特定日期财…

数据仓库深度探索系列 | 开篇:开启数仓建设新征程

数据仓库深度探索系列 | 开篇&#xff1a;开启数仓建设新征程 在当今信息技术飞速发展的背景下&#xff0c;企业面临着数据量的爆炸式增长。企业不仅要高效管理海量数据&#xff0c;还需从中提取关键信息以支持复杂决策。数据仓库已从单纯的数据存储工具&#xff0c;演变为支持…

Linux如何执行系统调用及高效执行系统调用:深入浅出的解析

文章目录如何执行系统调用及高效执行系统调用&#xff1a;深入浅出的解析一、什么是系统调用&#xff1f;1.1 系统调用的作用1.2 系统调用的分类二、如何执行系统调用&#xff1f;2.1 系统调用的触发2.2 库函数与系统调用的关系2.3 系统调用的示例2.4 错误处理三、如何高效执行…

基于 XGBoost 与 SHAP 的医疗自动化办公与可视化系统(上)

摘要 随着信息技术的飞速发展和医疗健康数据的爆炸式增长,现代医疗机构面临着日益复杂的数据处理挑战。医生和行政人员常常需要花费大量时间在数据提取、整理、分析和报告生成等重复性、事务性的工作上,这不仅降低了工作效率,也限制了医护人员将更多精力投入到直接的患者护…

基于Kafka实现简单的延时队列

生命无罪&#xff0c;健康万岁&#xff0c;我是laity。 我曾七次鄙视自己的灵魂&#xff1a; 第一次&#xff0c;当它本可进取时&#xff0c;却故作谦卑&#xff1b; 第二次&#xff0c;当它在空虚时&#xff0c;用爱欲来填充&#xff1b; 第三次&#xff0c;在困难和容易之间&…

OceanBase 4.3.5 解析:DDL性能诊断

背景DDL操作通常耗时较长&#xff0c;特别是涉及补数据流程的DDL语句。在执行过程中&#xff0c;用户面临两个主要痛点&#xff1a;一是无法实时获取DDL执行进度&#xff0c;难以区分长时间运行是正常现象还是由内部异常导致的停滞&#xff1b;二是执行效率经常低于预期&#x…

幸福网咖订座点餐小程序的设计与实现

文章目录前言详细视频演示具体实现截图后端框架SpringBoot微信小程序持久层框架MyBaits成功系统案例&#xff1a;参考代码数据库源码获取前言 博主介绍:CSDN特邀作者、985高校计算机专业毕业、现任某互联网大厂高级全栈开发工程师、Gitee/掘金/华为云/阿里云/GitHub等平台持续…

C语言————练习题册(答案版)

目录 每日更新5-10题&#xff0c;感兴趣可以订阅 一.理解函数、操作符、占位符 1.1 欢迎来到C语言的世界 1.2 输入和输出 1.3 浮点数的打印 1.4 字符串的打印 1.14 I am iron man 1.5 求和运算 1.6 计算比例 1.7 求商求余 1.8 不同数位上的数字 1.8.1 求个位数 1.8…

haproxy配置详解

1、haproxy简介 HAProxy是法国开发者 威利塔罗(Willy Tarreau) 在2000年使用C语言开发的一个开源软件 是一款具备高并发(万级以上)、高性能的TCP和HTTP负载均衡器 支持基于cookie的持久性&#xff0c;自动故障切换&#xff0c;支持正则表达式及web状态统计 企业版网站&#xff…

计网-TCP可靠传输

TCP&#xff08;传输控制协议&#xff09;的可靠传输是通过一系列机制保证数据准确、有序、不丢失地到达接收方。以下是TCP可靠传输的详细过程及核心机制&#xff1a;1. 数据分块与序列号&#xff08;Seq&#xff09;分块&#xff1a;应用层数据被分割成适合传输的TCP报文段&am…

数智管理学(三十九)

第三章 数智化对管理理论的冲击第三节 系统理论与生态化管理的强化系统理论作为理解企业运作与环境互动的重要框架&#xff0c;一直强调企业是一个由多个相互关联子系统构成的整体&#xff0c;其核心要素包括整体性、开放性、动态性和反馈机制。在传统管理视角下&#xff0c;这…