浏览器的同源策略 - 跨域问题
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）等方式获取用户的敏感信息或进行恶意操作。
具体原因如下：
-
防止信息泄露：同源策略阻止恶意的网站访问其他域名下的数据和文档对象模型（DOM）。这是因为在不同域下的网页很可能具有不同的安全性控制政策和访问权限，所以限制跨域访问有助于保护用户的敏感信息，如登录凭据、Cookie、本地存储等。
-
数据隔离：同源策略确保网站之间的数据相互隔离，防止一个网站的恶意代码或攻击不会影响其他网站的数据完整性和可用性。此举有助于防止一些常见的攻击，如点击劫持和防止恶意脚本对其他网站进行操作。
-
安全性和可靠性：同源策略有助于维护浏览器的安全性和稳定性。通过限制跨域访问，它可以减少恶意代码的传播，并减少对浏览器的影响。
虽然同源策略在保护用户信息和防止恶意攻击方面非常重要，但有时也会带来一定的限制。因此，如果确实需要在不同源之间进行数据交互，可以使用跨域资源共享（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 施加的限制。简单点说就是非同源会出现如下等限制： 无法访问其他源下的网页的 Cookies，Storage等；无法访问其他源下的DOM对象和 JS 对象;无法使…...
go 查询采购单设备事项[小示例]V2-两种模式{严格，包含模式}
第一版： https://mp.csdn.net/mp_blog/creation/editor/131979385 第二版： 优化内容： 检索数据的两种方式： 1.严格模式--找寻名称是一模一样的内容，在上一个版本实现了 2.包含模式，也就是我输入检索关…...
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 。输入序…...
行为型模式之解释器模式
解释器模式（Interpreter Pattern） 解释器模式（Interpreter Pattern）是一种行为设计模式，它用于对语言的文法进行解释和解析，以实现特定的操作。 在解释器模式中，存在以下几个角色： 抽…...
阿里云域名备案
最好的爱情，不是因为我们彼此需要在一起，而是因为我们彼此想要在一起。 阿里云的域名如何备案，域名备案和ICP备案一样吗？？ 截至我所掌握的知识（2021年9月），阿里云的域名备案和ICP备案…...
Clion开发Stm32之温湿度传感器(DS18B20)驱动编写和测试
前言 涵盖之前文章: Clion开发STM32之HAL库GPIO宏定义封装(最新版)Clion开发stm32之微妙延迟(采用nop指令实现)Clion开发STM32之日志模块(参考RT-Thread) DSP18B20驱动文件 头文件 /*******************************************************************************Copy…...
文档管理NAS储存安全吗？
关键词：私有化、知识管理系统、文档管理、群晖NAS、协同编辑 随着企业不断发展扩大，企业的知识文档也逐渐增多，很多企业方便管理及考虑数据安全问题会将文件数据储存至NAS。 但将企业文档数据放在NAS上就足够安全的吗？ 天翎文档管…...
用windeployqt.exe打包Qt代码
首先找到我们编译Qt代码的对应Qt版本的dll目录，该目录下有windeployqt.exe： D:\DevTools\Qt\5.9\msvc2017_64\bin 在这个目录下打开cmd程序。 然后把要打包的exe放到一个单独的目录下，比如： 然后在cmd中调用： winde…...
【Python机器学习】实验04(2) 机器学习应用实践--手动调参
文章目录 机器学习应用实践1.1 准备数据此处进行的调整为：要所有数据进行拆分 1.2 定义假设函数Sigmoid 函数 1.3 定义代价函数1.4 定义梯度下降算法gradient descent(梯度下降) 此处进行的调整为：采用train_x, train_y进行训练 1.5 绘制决策边界1.6 计算…...
【爬虫案例】用Python爬取iPhone14的电商平台评论
用python爬取某电商网站的iPhone14评论数据， 爬取目标： 核心代码如下： 爬取到的5分好评： 爬取到的3分中评： 爬取到的1分差评： 所以说，用python开发爬虫真的很方面！ 您好&…...
01)docker学习 centos7离线安装docker
docker学习 centos7离线安装docker 在实操前可以先看下docker教程，https://www.runoob.com/docker/docker-tutorial.html ， 不过教程上都是在线安装方式，很方便，离线安装肯定比如在线麻烦点。 一、什么是Docker 在学习docker时，在网上看到一篇博文讲得很好，自己总结一下…...
前端 - 实习两个星期总结
文章目录 吐槽总结新人建议项目学习到的 今天已经是菜鸟实习的第二个星期了，怎么说呢，反正就是进的一个不大不小的厂，做着不难不易的事，菜鸟现在主要做的就是适配！现在就来总结一下，不过这之前，…...
MySQL——主从复制
1.理解MySQL主从复制原理。 2.完成MySQL主从复制。 1.理解MySQL主从复制原理。 1）、MySQL支持的复制类型 （1）、基于语句（ statement ）的复制 在主服务器上执行SQL 语句，在从服务器上执行同样的语句。 My…...
报表下载工具
1.需求说明 我有一堆文件的Url地址， 现在需要按照企业，项目和报表类型分类下载到对应的文件夹中 2.相关实体类 企业文件夹定义 package com.vz.utils.report;import lombok.Data; import java.util.ArrayList; import java.util.List; import java.uti…...
树及其遍历
文章目录 树树定义专业术语树分类 二叉树分类存储连续存储（完全二叉树）链式存储一般树的存储森林的存储 线索二叉树哈夫曼树构造步骤 遍历先序遍历中序遍历后续遍历 链式二叉树遍历具体代码已知两种遍历序列求原始二叉树已知先序和中序求后序已知中序和后…...
Qt报错解决办法
anaconda环境安装qt报错解决办法 报错：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…...
Python（四十七）列表对象的创建
❤️ 专栏简介：本专栏记录了我个人从零开始学习Python编程的过程。在这个专栏中，我将分享我在学习Python的过程中的学习笔记、学习路线以及各个知识点。 ☀️ 专栏适用人群 ：本专栏适用于希望学习Python编程的初学者和有一定编程基础的人。无…...
#systemverilog# 说说Systemverilog中《automatic》那些事儿
前面我们学习了有关systemverilog语言中有关《static》的一些知识，同static 关系比较好的哥们，那就是 《automatic》。今天，我们了解认识一下。 在systemveriog中，存在三种并发执行语句，分别是fork..join，fork...join_any和fork..join_none，其中只有fork...join_none不…...
C/C++ 动态内存分配与它的指针变量
一、什么是内存的动态分配 全局变量分配在内存中的静态存储区。局部变量（包括形参）分配在内存中的动态存储区，这个存储区是一个称为栈的区域。除此之外，C语言还允许建立内存动态分配区域，以存放一些临时用的数据&…...
UE5初学者快速入门教程
虚幻引擎是一系列游戏开发工具，能够将 2D 手机游戏制作为 AAA 游戏机游戏。虚幻引擎 5 用于开发下一代游戏，包括Senuas Saga: Hellblade 2、Redfall（来自 Arkane Austin 的合作射击游戏）、Dragon Quest XII: The Flames of Fate、…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
对WWDC 2025 Keynote 内容的预测
借助我们以往对苹果公司发展路径的深入研究经验，以及大语言模型的分析能力，我们系统梳理了多年来苹果 WWDC 主题演讲的规律。在 WWDC 2025 即将揭幕之际，我们让 ChatGPT 对今年的 Keynote 内容进行了一个初步预测，聊作存档。等到明…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
【AI学习】三、AI算法中的向量
在人工智能（AI）算法中，向量（Vector）是一种将现实世界中的数据（如图像、文本、音频等）转化为计算机可处理的数值型特征表示的工具。它是连接人类认知（如语义、视觉特征）与…...
PL0语法，分析器实现！
简介 PL/0 是一种简单的编程语言，通常用于教学编译原理。它的语法结构清晰，功能包括常量定义、变量声明、过程（子程序）定义以及基本的控制结构（如条件语句和循环语句）。 PL/0 语法规范 PL/0 是一种教学用的小型编程语言，由 Niklaus Wirth 设计，用于展示编译原理的核…...
优选算法第十二讲：队列 + 宽搜 优先级队列
优选算法第十二讲：队列 宽搜 && 优先级队列 1.N叉树的层序遍历2.二叉树的锯齿型层序遍历3.二叉树最大宽度4.在每个树行中找最大值5.优先级队列 -- 最后一块石头的重量6.数据流中的第K大元素7.前K个高频单词8.数据流的中位数 1.N叉树的层序遍历 2.二叉树的锯…...
三分算法与DeepSeek辅助证明是单峰函数
前置 单峰函数有唯一的最大值，最大值左侧的数值严格单调递增，最大值右侧的数值严格单调递减。 单谷函数有唯一的最小值，最小值左侧的数值严格单调递减，最小值右侧的数值严格单调递增。 三分的本质 三分和二分一样都是通过不断缩…...
「全栈技术解析」推客小程序系统开发：从架构设计到裂变增长的完整解决方案
在移动互联网营销竞争白热化的当下，推客小程序系统凭借其裂变传播、精准营销等特性，成为企业抢占市场的利器。本文将深度解析推客小程序系统开发的核心技术与实现路径，助力开发者打造具有市场竞争力的营销工具。 一、系统核心功能架构&…...
Visual Studio Code 扩展
Visual Studio Code 扩展 change-case 大小写转换EmmyLua for VSCode 调试插件Bookmarks 书签 change-case 大小写转换 https://marketplace.visualstudio.com/items?itemNamewmaurer.change-case 选中单词后，命令 changeCase.commands 可预览转换效果 EmmyLua…...
Django RBAC项目后端实战 - 03 DRF权限控制实现
项目背景 在上一篇文章中，我们完成了JWT认证系统的集成。本篇文章将实现基于Redis的RBAC权限控制系统，为系统提供细粒度的权限控制。 开发目标 实现基于Redis的权限缓存机制开发DRF权限控制类实现权限管理API配置权限白名单 前置配置 在开始开发权限…...