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

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

news 2025/11/7 6:30:53

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

Python｜GIF 解析与构建（5）：手搓截屏和帧率控制

目录 Python&#xff5c;GIF 解析与构建&#xff08;5&#xff09;&#xff1a;手搓截屏和帧率控制 一、引言 二、技术实现&#xff1a;手搓截屏模块 2.1 核心原理 2.2 代码解析&#xff1a;ScreenshotData类 2.2.1 截图函数&#xff1a;capture_screen 三、技术实现&…...

编程新知 2025/9/19 8:02:57

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2025/11/5 6:33:45

反向工程与模型迁移：打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

编程新知 2025/9/15 5:56:53

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/10/27 2:28:51

Redis相关知识总结（缓存雪崩，缓存穿透，缓存击穿，Redis实现分布式锁，如何保持数据库和缓存一致）

文章目录 1.什么是Redis&#xff1f;2.为什么要使用redis作为mysql的缓存&#xff1f;3.什么是缓存雪崩、缓存穿透、缓存击穿&#xff1f;3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...

编程新知 2025/11/1 2:50:59

【位运算】消失的两个数字（hard）

消失的两个数字&#xff08;hard&#xff09; 题⽬描述&#xff1a;解法&#xff08;位运算&#xff09;&#xff1a;Java 算法代码&#xff1a;更简便代码 题⽬链接&#xff1a;⾯试题 17.19. 消失的两个数字 题⽬描述&#xff1a; 给定⼀个数组&#xff0c;包含从 1 到 N 所有…...

编程新知 2025/10/17 12:01:41

服务器硬防的应用场景都有哪些？

服务器硬防是指一种通过硬件设备层面的安全措施来防御服务器系统受到网络攻击的方式&#xff0c;避免服务器受到各种恶意攻击和网络威胁&#xff0c;那么&#xff0c;服务器硬防通常都会应用在哪些场景当中呢&#xff1f; 硬防服务器中一般会配备入侵检测系统和预防系统&#x…...

编程新知 2025/7/23 18:46:38

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

编程新知 2025/10/2 6:08:50

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/11/2 23:48:17

C#中的CLR属性、依赖属性与附加属性

CLR属性的主要特征 封装性&#xff1a; 隐藏字段的实现细节 提供对字段的受控访问 访问控制&#xff1a; 可单独设置get/set访问器的可见性 可创建只读或只写属性 计算属性&#xff1a; 可以在getter中执行计算逻辑 不需要直接对应一个字段 验证逻辑&#xff1a; 可以…...

编程新知 2025/10/7 0:47:59