前端笔记:同源策略、跨域问题

只有前端才会有跨域问题后端不受限制

一、什么是“同源策略”(Same-Origin Policy)

✅ 定义:

浏览器的 同源策略 是一种 安全机制限制一个源的 JavaScript 访问另一个源的资源,以防止恶意网站窃取用户敏感信息。

✅ “同源” 的判断标准(协议 + 域名 + 端口)必须都相同:

条件是否同源
http://a.com 与 http://a.com✅ 是同源
http://a.com 与 https://a.com❌ 协议不同
http://a.com 与 http://b.com❌ 域名不同
http://a.com:8080 与 http://a.com:8081❌ 端口不同


二、什么是“跨域”

跨域(Cross-Origin) 指的是前端 JavaScript 在浏览器中访问“非同源”的接口资源。

举例:

假设你的前端页面地址是:

http://localhost:8080

而你访问的后端接口是:

http://localhost:8081/api/user

因为 端口不同,所以就是跨域请求,浏览器就会限制 JS 获取响应内容。


三、同源策略限制什么?

操作类型是否受同源策略限制
<img src=""> 加载图片❌ 不受限制(可跨域)
<link> 加载 CSS❌ 不受限制(可跨域)
<script> 加载 JS❌ 不受限制(可跨域)
AJAX(XHR、fetch)请求接口✅ 受限制(必须同源)
页面间的 Cookie 共享✅ 受限制(必须同源)
iframe 操作其它页面 DOM✅ 受限制(必须同源)


四、为什么存在同源策略?

为了解决以下安全问题:

  • 防止 A 网站通过 JS 恶意读取 B 网站的用户信息(如 Cookie、localStorage、接口返回数据)

  • 避免 CSRF 攻击等跨站请求攻击

  • 浏览器不限制,用户信息可能被任意网站窃取


五、跨域请求报错长这样

Access to XMLHttpRequest at 'http://localhost:8081/api/user' 
from origin 'http://localhost:8080' has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

六、跨域的常见解决方案

✅ 方式一:服务端配置 CORS(推荐方式)

什么是 CORS?

CORS(Cross-Origin Resource Sharing)是浏览器与服务端约定的 跨域资源共享协议

不允许不是浏览器的一种安全限制么?为啥要后端配置允许跨域(CORS)?

🌐 浏览器的跨域请求是否被允许,是浏览器根据后端响应头是否包含 CORS 信息来决定的!

换句话说:

  • 不是浏览器自己说了算。

  • 是浏览器问后端:“你同不同意这个域名访问你?”

  • 如果后端没明确说“我允许”,那浏览器就拦截响应,不让 JS 拿到。

原理:
  • 浏览器在跨域请求时,会自动带上 Origin 请求头

  • 服务端需要在响应头中明确允许的来源:

Access-Control-Allow-Origin: http://localhost:8080
  • 浏览器收到后,才会允许 JavaScript 读取响应

Spring Boot 中配置 CORS:
@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 允许所有路径.allowedOrigins("http://localhost:8080") // 允许访问的域.allowedMethods("GET", "POST", "PUT", "DELETE").allowCredentials(true); // 允许携带 Cookie}
}

✅ 方式二:前端开发时使用代理(只适合开发环境)

  • Vue/React 项目中,前端配置 devServer.proxy,把请求“伪装”转发到后端

// vue.config.js
module.exports = {devServer: {proxy: {'/api': {target: 'http://localhost:8081',changeOrigin: true}}}
}

✅ 方式三:JSONP(只能用 GET,已淘汰)

  • 原理:利用 <script src=""> 不受同源策略限制,将数据包成 JS 函数调用

  • 只能解决 GET 请求

  • 安全性差,功能弱,几乎淘汰


七、注意:跨域问题是浏览器行为,服务端或后端代码无此限制

场景是否受同源策略限制
浏览器 + JS + Ajax✅ 限制
后端发 Http 请求❌ 不限制
Postman 发请求❌ 不限制
curl 命令❌ 不限制


八、CORS 的核心意义总结一句话:

🌐 同源策略是浏览器为安全设定的限制机制,CORS 是服务端响应中声明“我允许谁来访问我”的机制。

如果服务端不显式声明允许,浏览器就自动屏蔽响应结果。


九、Vue + SpringBoot 是否跨域?

是跨域的,典型表现:

Vue 地址Spring Boot 地址是否跨域
http://localhost:8080http://localhost:8081✅ 是
http://localhost:8080http://localhost:8080❌ 否
http://frontend.example.comhttp://api.example.com✅ 是

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

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

相关文章

java通过com进行pdf转换docx丢失

使用&#xff0c;通过com调用&#xff0c;发现pdf转换成docx后&#xff0c;没有看到docx输出到指定目录。直接说解决方案:关闭的保护模式即可&#xff0c;打开工具&#xff0c;编辑->首选项 找到安全性(增强)&#xff0c;关闭启动时启用保护模式关闭后&#xff0c;docx正常输…

SQL基础⑫ | 视图篇

0 序言 本文将系统讲解数据库中视图的相关知识&#xff0c;包括视图的定义、作用、创建&#xff08;单表、多表、基于视图创建&#xff09;、查看、更新、修改与删除操作&#xff0c;以及视图的优缺点。 通过学习&#xff0c;你能够掌握视图的基本概念&#xff0c;理解何时及如…

移动云×华为昇腾:“大EP+PD分离”架构实现单卡吞吐量跨越式提升!

在面向下一代AI基础设施的关键技术攻关中&#xff0c;移动云与华为昇腾计算团队深度协同&#xff0c;实现了大模型推理引擎的架构级突破。双方基于昇腾AI基础软硬件平台&#xff0c;针对DeepSeek大模型完成了大规模专家并行&#xff08;Expert Parallelism&#xff0c;简称“大…

配电自动化终端中电源模块的设计

配电自动化终端中电源模块的设计 引言 配电终端设备的可靠性和自动化程度,直接影响到整个配电自动化系统的可靠性和自动化水平。由于配电终端设备一般安装于户外或比较偏僻的地方,不可能有直流电源提供,因此,配电网终端设备的直流供电方式成为各配网自动化改造中必须要研究…

性能测试-groovy语言1

课程&#xff1a;B站大学 记录软件测试-性能测试学习历程、掌握前端性能测试、后端性能测试、服务端性能测试的你才是一个专业的软件测试工程师 Jmeter之Groovy语言Groovy简介为何性能测试中选择Groovywindows下载Groovy进入官网配置环境变量Groovy的数据类型groovy的保留字字符…

天邑TY1613_S905L3SB_安卓9-高安非-高安版-通刷-TTL线刷固件包

天邑TY1613_S905L3SB_安卓9-高安非-高安版-通刷-TTL线刷固件包刷机说明&#xff1a;本固件为TTL刷机方式&#xff0c;需要准备如下工具&#xff1b;电烙铁TTL线刷机优盘TTL接触点位于处理器左侧&#xff0c;从上往下数第二脚GND、3TXD、4RXD跑码工具-【工具大全】-putty跑码工具…

【硬件-笔试面试题】硬件/电子工程师,笔试面试题-7,(知识点:晶体管放大倍数计算)

目录 1、题目 2、解答 3、相关知识点 晶体管的电流分配关系 直流电流放大系数\(\overline{\beta}\) 交流电流放大系数\(\beta\) 晶体管的放大条件 总结 【硬件-笔试面试题】硬件/电子工程师&#xff0c;笔试面试题汇总版&#xff0c;持续更新学习&#xff0c;加油&…

力扣-152.乘积最大子数组

题目链接 152.乘积最大子数组 class Solution {public int maxProduct(int[] nums) {int[] dpMax new int[nums.length]; //包括nums[i]的乘积最大值int[] dpMin new int[nums.length]; //包括nums[i]的乘积最小值int res nums[0];dpMax[0] nums[0];dpMin[0] nums[0];fo…

HTTP/1.0、HTTP/1.1 和 HTTP/2.0 主要区别

一句话总结 HTTP/1.0: 短连接&#xff0c;每次请求都需要建立一个新的 TCP 连接&#xff0c;性能较差。HTTP/1.1: 长连接&#xff0c;默认开启 Keep-Alive&#xff0c;连接可复用&#xff0c;解决了 1.0 的大部分问题&#xff0c;是目前使用最广泛的版本。HTTP/2.0: 二进制、多…

Navicat 17.3 正式发布 | 现已支持达梦、金仓和 IvorySQL 数据库

&#x1f680;&#x1f680;&#x1f680; Navicat 很高兴地宣布&#xff1a;Navicat 17.3 版本正式发布。此次更新包含多项突破性功能&#xff0c;包括新增对达梦、金仓和 IvorySQL 等数据库的支持&#xff0c;全面强化 AI 功能并新增阿里通义千问等 AI 大模型&#xff0c;同…

前端性能新纪元:Rust + WebAssembly 如何在浏览器中实现10倍性能提升(以视频处理为例)

前端性能新纪元&#xff1a;Rust WebAssembly 如何在浏览器中实现10倍性能提升&#xff08;以视频处理为例&#xff09; JavaScript&#xff0c;作为 Web 开发的基石&#xff0c;是动态的、灵活的&#xff0c;但在性能上&#xff0c;它也存在着天生的“软肋”。对于那些计算密…

Web前端:JavaScript find()函数内判断

&#x1f3af; find是什么&#xff1f;find() 是 JavaScript 数组&#xff08;Array&#xff09;提供的一个内置方法&#xff0c;用于在数组中查找第一个满足条件的元素。简单来说&#xff1a;它像侦探一样遍历数组&#xff0c;找到第一个符合条件的成员就返回它。⚙️ 核心作用…

MySQL详解三

MySQL详解三事务ACID特性原子性一致性隔离性持久性事务的隔离级别读未提交(Read Uncommitted)读已提交&#xff08;Read Committed&#xff09;可重复读&#xff08;Repeatable Read&#xff09;串行化&#xff08;serializable&#xff09;MVCC聚集索引的隐藏列read view锁全局…

ABQ-LLM:用于大语言模型的任意比特量化推理加速

温馨提示&#xff1a; 本篇文章已同步至"AI专题精讲" ABQ-LLM&#xff1a;用于大语言模型的任意比特量化推理加速 摘要 大语言模型&#xff08;LLMs&#xff09;在自然语言处理任务中取得了革命性的进展。然而&#xff0c;其实际应用受到巨大的内存与计算开销的限制…

kafka的shell操作

Kafka 提供了丰富的 shell 命令工具&#xff0c;位于 Kafka 安装目录的 bin/ 目录下&#xff08;Windows 系统为 bin/windows/&#xff09;。这些命令用于管理主题、生产者、消费者、分区等核心组件。以下是常用的 Kafka shell 操作大全&#xff1a;一、主题&#xff08;Topic&…

client-go: k8s选主

快速上手 下面这个代码就是一个选主的大概逻辑 package mainimport ("context""flag""fmt"_ "net/http/pprof""os""path/filepath""time""golang.org/x/exp/rand"v1 "k8s.io/api/core/v…

为什么Java的String不可变?

为什么Java的String不可变&#xff1f; 场景&#xff1a; 你在开发多线程用户系统时&#xff0c;发现用户密码作为String传递后&#xff0c;竟被其他线程修改。这种安全隐患源于对String可变性的误解。Java将String设计为不可变类&#xff0c;正是为了解决这类核心问题。 1️⃣…

在Ubuntu上使用QEMU学习RISC-V程序(1)起步第一个程序

文章目录一、 引言二、 环境准备三、编写简单的RISC-V程序四、 编译步骤详解五、使用QEMU运行程序六、程序详解七、退出QEMU八、总结附录&#xff1a;QEMU中通过UTRA显示字符工作原理1、内存映射I/O原理2、add.s程序工作流程3、关键指令解析4、QEMU模拟的UART控制器5、为什么不…

R拟合 | 一个分布能看到三个峰,怎么拟合出这三个正态分布的参数? | 高斯混合模型 与 EM算法

1. 效果已知数据符合上图分布&#xff0c;怎么求下图的三个分布的参数mu, sigma&#xff0c;及每个分布的权重 lambda&#xff1f; 2. 代码: 高斯混合模型&#xff08;Gaussian Mixture Model&#xff0c;简称GMM&#xff09; library(mixtools) set.seed(123) # 确保结果可重复…

Excel自动分列开票工具推荐

软件介绍 本文介绍一款基于Excel VBA开发的自动分列开票工具&#xff0c;可高效处理客户对账单并生成符合要求的发票清单。 软件功能概述 该工具能够将客户对账单按照订单号自动拆分为独立文件&#xff0c;并生成可直接导入发票清单系统的标准化格式。 软件特点 这是一款体…