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

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

news 2025/11/7 1:19:49

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

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/10/31 23:27:43

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

编程新知 2025/9/23 9:00:33

k8s从入门到放弃之Ingress七层负载

k8s从入门到放弃之Ingress七层负载 在Kubernetes&#xff08;简称K8s&#xff09;中&#xff0c;Ingress是一个API对象&#xff0c;它允许你定义如何从集群外部访问集群内部的服务。Ingress可以提供负载均衡、SSL终结和基于名称的虚拟主机等功能。通过Ingress&#xff0c;你可…...

编程新知 2025/9/7 0:12:53

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

sqlserver 根据指定字符 解析拼接字符串

DECLARE LotNo NVARCHAR(50)A,B,C DECLARE xml XML ( SELECT <x> REPLACE(LotNo, ,, </x><x>) </x> ) DECLARE ErrorCode NVARCHAR(50) -- 提取 XML 中的值 SELECT value x.value(., VARCHAR(MAX))…...

编程新知 2025/10/29 4:33:03

【git】把本地更改提交远程新分支feature_g

创建并切换新分支 git checkout -b feature_g 添加并提交更改 git add . git commit -m “实现图片上传功能” 推送到远程 git push -u origin feature_g...

编程新知 2025/8/15 18:53:03

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

编程新知 2025/11/4 19:17:54

Java线上CPU飙高问题排查全指南

一、引言 在Java应用的线上运行环境中&#xff0c;CPU飙高是一个常见且棘手的性能问题。当系统出现CPU飙高时&#xff0c;通常会导致应用响应缓慢&#xff0c;甚至服务不可用&#xff0c;严重影响用户体验和业务运行。因此&#xff0c;掌握一套科学有效的CPU飙高问题排查方法&…...

编程新知 2025/11/2 5:30:15

React---day11

14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store&#xff1a; 我们在使用异步的时候理应是要使用中间件的&#xff0c;但是configureStore 已经自动集成了 redux-thunk&#xff0c;注意action里面要返回函数 import { configureS…...

编程新知 2025/9/13 7:43:29

推荐 github 项目:GeminiImageApp(图片生成方向，可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

编程新知 2025/10/27 6:22:43