当前位置： 首页 > news >正文

浏览器的同源策略 - 跨域问题

news 2025/11/7 0:56:24

1.什么是跨域

跨域问题的实质是浏览器的同源策略造成的。浏览器同源策略是浏览器为 JavaScript 施加的限制。简单点说就是非同源会出现如下等限制：

  • 无法访问其他源下的网页的 Cookies，Storage等；
  • 无法访问其他源下的DOM对象和 JS 对象;
  • 无法使用 Ajax 向其他源发送请求（除非其他源允许）

那什么情况下会出现限制呢？也就是什么时候会出现跨域？

前提：必须运行在浏览器中。因为同源策略是浏览器对 JS 施加的

  • 协议不同。http://abc.com:80 的网页访问 https://abc.com:80
  • 主机名不同。https://abc.com:80 的网页访问 https://cde.com:80 / https://api.abc.com:80 (子域名也不行)
  • 端口不同。https://abc.com:80 的网页访问 https://abc.com:443

举个栗子

前端运行地址：127.0.0.1:3000

import React, { useState } from "react";const App = () => {const [data, setData] = useState(null);const fetchData = async () => {try {const response = await fetch('http://127.0.0.1:8080/test');const data = await response.json();setData(data);} catch (error) {console.error('Error:', error);}};return (<div><button onClick={fetchData}>Fetch</button>{data && <pre>{JSON.stringify(data, null, 2)}</pre>}</div>);
};
export default App;

后端运行地址：127.0.0.1:8080

@RestController
public class TestController {@GetMapping("/test")public Map<String, Object> test(HttpServletResponse response) {return new HashMap<String, Object>() {{put("ok" , true);}};}
}

点击 Fetch 后，产生跨域

2.为什么要有同源策略

Web的同源策略是一种浏览器安全机制，被设计用于保护用户信息和防止恶意攻击。同源策略要求浏览器在加载网页时，只允许与当前页面具有相同源的资源进行交互，即协议、域名和端口必须完全相同。

同源策略的主要目的是防止恶意网站通过跨站脚本攻击（XSS）或跨站请求伪造（CSRF）等方式获取用户的敏感信息或进行恶意操作。

具体原因如下：

  1. 防止信息泄露：同源策略阻止恶意的网站访问其他域名下的数据和文档对象模型（DOM）。这是因为在不同域下的网页很可能具有不同的安全性控制政策和访问权限，所以限制跨域访问有助于保护用户的敏感信息，如登录凭据、Cookie、本地存储等。

  2. 数据隔离：同源策略确保网站之间的数据相互隔离，防止一个网站的恶意代码或攻击不会影响其他网站的数据完整性和可用性。此举有助于防止一些常见的攻击，如点击劫持和防止恶意脚本对其他网站进行操作。

  3. 安全性和可靠性：同源策略有助于维护浏览器的安全性和稳定性。通过限制跨域访问，它可以减少恶意代码的传播，并减少对浏览器的影响。

虽然同源策略在保护用户信息和防止恶意攻击方面非常重要，但有时也会带来一定的限制。因此，如果确实需要在不同源之间进行数据交互，可以使用跨域资源共享（CORS）等安全机制来规避同源策略的限制。
（来自ChatGPT）

3.怎么解决跨域问题，即绕过同源策略限制

跨域实例中，前端和后端运行的端口不同（前端3000，后端8080）所以导致了跨域。如果想要前端能直接访问后端，有什么办法呢？

3.1 服务端设置CORS

这是最简单的办法，在后端加上配置允许所有的源地址访问：
"Access-Control-Allow-Origin" : "*"

@RestController
public class TestController {@GetMapping("/test")public Map<String, Object> test(HttpServletResponse response) {// 这是最核心的配置，可以使用更加优雅的方式，@CrossOrigin注解、拦截器、过滤器等response.setHeader("Access-Control-Allow-Origin" , "*");return new HashMap<String, Object>() {{put("ok" , true);}};}
}

3.2 代理

代理的核心是让浏览器页面访问一个同源的服务端，让同源服务端去获取页面想要的资源。

Nginx 中：

server {listen       3000;server_name  127.0.0.1;location /api {proxy_pass   http://localhost:8080;}
}

Node 中：（以 开发React 应用为例）

const proxy = require('http-proxy-middleware');
module.exports = function (app) {app.use('/api',proxy({target : 'http://127.0.0.1:8080/',changeOrigin : true,PathRewrite : {'^/api' : ''}}));
};

3.3 JSONP

简单来说就是利用 HTML 标签来访问跨域的资源（因为同源策略是浏览器为 JavaScript 施加的限制）

前端准备好callback方法和请求的标签

<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>React App</title><script>// 准备好回调的方法const callback = (data) => {console.log("data", data);}</script><!-- 通过访问接口，获取模拟的 data 入参 --><script src="http://127.0.0.1:8080/jsonp"></script></head><body><div id="root"></div></body>
</html>

后端增加接口，模拟返回 JS 脚本：

@GetMapping("/jsonp")
public String jsonp() {return "callback({\"ok\": false});";
}

相关文章：

浏览器的同源策略 - 跨域问题

1.什么是跨域 跨域问题的实质是浏览器的同源策略造成的。浏览器同源策略是浏览器为 JavaScript 施加的限制。简单点说就是非同源会出现如下等限制&#xff1a; 无法访问其他源下的网页的 Cookies&#xff0c;Storage等&#xff1b;无法访问其他源下的DOM对象和 JS 对象;无法使…...

编程日记 2023/7/29 10:05:46

go 查询采购单设备事项[小示例]V2-两种模式{严格，包含模式}

第一版&#xff1a; https://mp.csdn.net/mp_blog/creation/editor/131979385 第二版&#xff1a; 优化内容&#xff1a; 检索数据的两种方式&#xff1a; 1.严格模式--找寻名称是一模一样的内容&#xff0c;在上一个版本实现了 2.包含模式&#xff0c;也就是我输入检索关…...

编程日记 2023/7/29 10:04:45

c++11 标准模板（STL）（std::basic_filebuf）（八）

定义于头文件 <fstream> template< class CharT, class Traits std::char_traits<CharT> > class basic_filebuf : public std::basic_streambuf<CharT, Traits> std::basic_filebuf 是关联字符序列为文件的 std::basic_streambuf 。输入序…...

编程日记 2023/7/29 10:03:43

行为型模式之解释器模式

解释器模式&#xff08;Interpreter Pattern&#xff09; 解释器模式&#xff08;Interpreter Pattern&#xff09;是一种行为设计模式&#xff0c;它用于对语言的文法进行解释和解析&#xff0c;以实现特定的操作。 在解释器模式中&#xff0c;存在以下几个角色&#xff1a; 抽…...

编程日记 2023/7/29 10:02:42

阿里云域名备案

最好的爱情&#xff0c;不是因为我们彼此需要在一起&#xff0c;而是因为我们彼此想要在一起。 阿里云的域名如何备案&#xff0c;域名备案和ICP备案一样吗&#xff1f;&#xff1f; 截至我所掌握的知识&#xff08;2021年9月&#xff09;&#xff0c;阿里云的域名备案和ICP备案…...

编程日记 2023/7/29 10:01:41

Clion开发Stm32之温湿度传感器(DS18B20)驱动编写和测试

前言 涵盖之前文章: Clion开发STM32之HAL库GPIO宏定义封装(最新版)Clion开发stm32之微妙延迟(采用nop指令实现)Clion开发STM32之日志模块(参考RT-Thread) DSP18B20驱动文件 头文件 /*******************************************************************************Copy…...

编程日记 2023/7/29 10:00:39

文档管理NAS储存安全吗？

关键词&#xff1a;私有化、知识管理系统、文档管理、群晖NAS、协同编辑 随着企业不断发展扩大&#xff0c;企业的知识文档也逐渐增多&#xff0c;很多企业方便管理及考虑数据安全问题会将文件数据储存至NAS。 但将企业文档数据放在NAS上就足够安全的吗&#xff1f; 天翎文档管…...

编程日记 2023/7/29 9:59:38

用windeployqt.exe打包Qt代码

首先找到我们编译Qt代码的对应Qt版本的dll目录&#xff0c;该目录下有windeployqt.exe&#xff1a; D:\DevTools\Qt\5.9\msvc2017_64\bin 在这个目录下打开cmd程序。 然后把要打包的exe放到一个单独的目录下&#xff0c;比如&#xff1a; 然后在cmd中调用&#xff1a; winde…...

编程日记 2023/7/29 9:58:37

【Python机器学习】实验04(2) 机器学习应用实践--手动调参

文章目录 机器学习应用实践1.1 准备数据此处进行的调整为&#xff1a;要所有数据进行拆分 1.2 定义假设函数Sigmoid 函数 1.3 定义代价函数1.4 定义梯度下降算法gradient descent(梯度下降) 此处进行的调整为&#xff1a;采用train_x, train_y进行训练 1.5 绘制决策边界1.6 计算…...

编程日记 2023/7/29 9:57:36

【爬虫案例】用Python爬取iPhone14的电商平台评论

用python爬取某电商网站的iPhone14评论数据&#xff0c; 爬取目标&#xff1a; 核心代码如下&#xff1a; 爬取到的5分好评&#xff1a; 爬取到的3分中评&#xff1a; 爬取到的1分差评&#xff1a; 所以说&#xff0c;用python开发爬虫真的很方面&#xff01; 您好&…...

编程日记 2023/7/29 9:56:34

01)docker学习 centos7离线安装docker

docker学习 centos7离线安装docker 在实操前可以先看下docker教程，https://www.runoob.com/docker/docker-tutorial.html ， 不过教程上都是在线安装方式，很方便，离线安装肯定比如在线麻烦点。 一、什么是Docker 在学习docker时，在网上看到一篇博文讲得很好，自己总结一下…...

编程日记 2023/7/29 9:55:33

前端 - 实习两个星期总结

文章目录 吐槽总结新人建议项目学习到的 今天已经是菜鸟实习的第二个星期了&#xff0c;怎么说呢&#xff0c;反正就是进的一个不大不小的厂&#xff0c;做着不难不易的事&#xff0c;菜鸟现在主要做的就是适配&#xff01;现在就来总结一下&#xff0c;不过这之前&#xff0c;…...

编程日记 2023/7/29 9:54:32

MySQL——主从复制

1.理解MySQL主从复制原理。 2.完成MySQL主从复制。 1.理解MySQL主从复制原理。 1&#xff09;、MySQL支持的复制类型 &#xff08;1&#xff09;、基于语句&#xff08; statement &#xff09;的复制 在主服务器上执行SQL 语句&#xff0c;在从服务器上执行同样的语句。 My…...

编程日记 2023/7/29 9:53:31

报表下载工具

1.需求说明 我有一堆文件的Url地址&#xff0c; 现在需要按照企业&#xff0c;项目和报表类型分类下载到对应的文件夹中 2.相关实体类 企业文件夹定义 package com.vz.utils.report;import lombok.Data; import java.util.ArrayList; import java.util.List; import java.uti…...

编程日记 2023/7/29 9:52:29

树及其遍历

文章目录 树树定义专业术语树分类 二叉树分类存储连续存储&#xff08;完全二叉树&#xff09;链式存储一般树的存储森林的存储 线索二叉树哈夫曼树构造步骤 遍历先序遍历中序遍历后续遍历 链式二叉树遍历具体代码已知两种遍历序列求原始二叉树已知先序和中序求后序已知中序和后…...

编程日记 2023/7/29 9:51:27

Qt报错解决办法

anaconda环境安装qt报错解决办法 报错&#xff1a;thresholdGap: 20 pointsShape: 164142 qt.qpa.plugin: Could not find the Qt platform plugin “wayland” in “/home/tianhailong/anaconda3/envs/edge_algorithm/lib/python3.8/site-packages/cv2/qt/plugins” This app…...

编程日记 2023/7/29 9:50:26

Python（四十七）列表对象的创建

❤️ 专栏简介&#xff1a;本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中&#xff0c;我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 &#xff1a;本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...

编程日记 2023/7/29 9:49:25

#systemverilog# 说说Systemverilog中《automatic》那些事儿

前面我们学习了有关systemverilog语言中有关《static》的一些知识，同static 关系比较好的哥们，那就是 《automatic》。今天，我们了解认识一下。 在systemveriog中，存在三种并发执行语句，分别是fork..join，fork...join_any和fork..join_none，其中只有fork...join_none不…...

编程日记 2023/7/29 9:48:24

C/C++ 动态内存分配与它的指针变量

一、什么是内存的动态分配 全局变量分配在内存中的静态存储区。局部变量&#xff08;包括形参&#xff09;分配在内存中的动态存储区&#xff0c;这个存储区是一个称为栈的区域。除此之外&#xff0c;C语言还允许建立内存动态分配区域&#xff0c;以存放一些临时用的数据&…...

编程日记 2023/7/29 9:47:23

UE5初学者快速入门教程

虚幻引擎是一系列游戏开发工具&#xff0c;能够将 2D 手机游戏制作为 AAA 游戏机游戏。虚幻引擎 5 用于开发下一代游戏&#xff0c;包括Senuas Saga: Hellblade 2、Redfall&#xff08;来自 Arkane Austin 的合作射击游戏&#xff09;、Dragon Quest XII: The Flames of Fate、…...

编程日记 2023/7/29 9:46:19

【网络安全产品大调研系列】2. 体验漏洞扫描

前言 2023 年漏洞扫描服务市场规模预计为 3.06&#xff08;十亿美元&#xff09;。漏洞扫描服务市场行业预计将从 2024 年的 3.48&#xff08;十亿美元&#xff09;增长到 2032 年的 9.54&#xff08;十亿美元&#xff09;。预测期内漏洞扫描服务市场 CAGR&#xff08;增长率&…...

编程新知 2025/11/3 4:47:37

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院挂号小程序

一、开发准备 ​​环境搭建​​&#xff1a; 安装DevEco Studio 3.0或更高版本配置HarmonyOS SDK申请开发者账号 ​​项目创建​​&#xff1a; File > New > Create Project > Application (选择"Empty Ability") 二、核心功能实现 1. 医院科室展示 /…...

编程新知 2025/9/5 12:16:40

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

编程新知 2025/11/5 12:28:50

（转）什么是DockerCompose?它有什么作用？

一、什么是DockerCompose? DockerCompose可以基于Compose文件帮我们快速的部署分布式应用&#xff0c;而无需手动一个个创建和运行容器。 Compose文件是一个文本文件&#xff0c;通过指令定义集群中的每个容器如何运行。 DockerCompose就是把DockerFile转换成指令去运行。 …...

编程新知 2025/10/31 1:13:56

Hive 存储格式深度解析：从 TextFile 到 ORC，如何选对数据存储方案？

在大数据处理领域&#xff0c;Hive 作为 Hadoop 生态中重要的数据仓库工具&#xff0c;其存储格式的选择直接影响数据存储成本、查询效率和计算资源消耗。面对 TextFile、SequenceFile、Parquet、RCFile、ORC 等多种存储格式&#xff0c;很多开发者常常陷入选择困境。本文将从底…...

编程新知 2025/9/16 2:04:37

【Java学习笔记】BigInteger 和 BigDecimal 类

BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点&#xff1a;传参类型必须是类对象 一、BigInteger 1. 作用&#xff1a;适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

编程新知 2025/10/4 17:23:01

【电力电子】基于STM32F103C8T6单片机双极性SPWM逆变（硬件篇）

本项目是基于 STM32F103C8T6 微控制器的 SPWM（正弦脉宽调制）电源模块，能够生成可调频率和幅值的正弦波交流电源输出。该项目适用于逆变器、UPS电源、变频器等应用场景。 供电电源 输入电压采集 上图为本设计的电源电路，图中 D1 为二极管， 其目的是防止正负极电源反接， …...

编程新知 2025/10/27 20:14:08

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

编程新知 2025/10/28 6:00:57

Docker拉取MySQL后数据库连接失败的解决方案

在使用Docker部署MySQL时&#xff0c;拉取并启动容器后&#xff0c;有时可能会遇到数据库连接失败的问题。这种问题可能由多种原因导致&#xff0c;包括配置错误、网络设置问题、权限问题等。本文将分析可能的原因&#xff0c;并提供解决方案。 一、确认MySQL容器的运行状态 …...

编程新知 2025/11/3 20:21:04

区块链技术概述

区块链技术是一种去中心化、分布式账本技术&#xff0c;通过密码学、共识机制和智能合约等核心组件&#xff0c;实现数据不可篡改、透明可追溯的系统。 一、核心技术 1. 去中心化 特点&#xff1a;数据存储在网络中的多个节点&#xff08;计算机&#xff09;&#xff0c;而非…...

编程新知 2025/10/25 7:41:33