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

假如你的项目是springboot+vue怎么解决跨域问题

1. 前端代理(开发环境推荐)

适用场景:Vue 开发环境调试时,避免直接请求后端接口的跨域问题。
实现步骤

  1. 在 Vue 项目的 vue.config.js 中配置代理:

    module.exports = {devServer: {proxy: {'/api': {  // 代理所有以 /api 开头的请求target: 'http://localhost:8080', // Spring Boot 后端地址changeOrigin: true, // 允许跨域pathRewrite: {'^/api': '' // 去除请求路径中的 /api 前缀}}}}
    }

    2.前端请求时使用 /api 前缀:

    axios.get('/api/users').then(response => {// 处理响应
    });

    优点:无需修改后端代码,适合开发阶段快速解决跨域。


2. 后端全局配置 CORS(生产环境推荐)

适用场景:生产环境需要后端直接支持跨域。
实现步骤

  1. 在 Spring Boot 中创建全局 CORS 配置类:

    @Configuration
    public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 所有接口.allowedOrigins("http://localhost:5173") // 允许的前端地址.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法.allowedHeaders("*") // 允许的请求头.allowCredentials(true) // 允许发送 Cookie.maxAge(3600); // 预检请求缓存时间(秒)}
    }

    2.若使用 Spring Security,需额外放行 OPTIONS 请求(预检请求):

    @Configuration
    @EnableWebSecurity
    public class SecurityConfig {@Beanpublic SecurityFilterChain filterChain(HttpSecurity http) throws Exception {http.cors() // 启用 CORS.and()// 其他安全配置....authorizeRequests().requestMatchers(HttpMethod.OPTIONS).permitAll() // 放行 OPTIONS 请求.anyRequest().authenticated();return http.build();}
    }

3. 后端注解配置(按接口控制)

适用场景:仅特定接口需要跨域支持。
实现步骤:在 Controller 或方法上添加 @CrossOrigin 注解:

@RestController
@CrossOrigin(origins = "http://localhost:5173") // 类级别注解
public class UserController {@GetMapping("/users")@CrossOrigin(origins = "http://localhost:5173") // 方法级别注解public List<User> getUsers() {// 业务逻辑}
}

4. Nginx 反向代理(生产环境终极方案)

适用场景:前后端部署到同一域名下,彻底避免跨域。
实现步骤

  1. 配置 Nginx,将前端请求代理到后端接口:

    server {listen 80;server_name your-domain.com;# 前端静态资源location / {root /path/to/vue/dist;index index.html;try_files $uri $uri/ /index.html;}# 后端 API 代理location /api {proxy_pass http://localhost:8080;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;}
    }

    2.重启 Nginx:

    sudo nginx -s reload

总结

方案适用场景优点缺点
前端代理开发环境无需后端改动,快速解决跨域仅适用于开发环境
后端全局 CORS生产环境统一管理,安全性可控需后端配置
注解配置特定接口跨域灵活控制单个接口配置冗余,维护成本高
Nginx 反向代理生产环境部署彻底解决跨域,提升性能需运维支持

推荐组合

  • 开发环境:前端代理(方案1) + 后端全局 CORS(方案2)。

  • 生产环境:Nginx 反向代理(方案4) + 后端全局 CORS(方案2,双重保障)。

相关文章:

假如你的项目是springboot+vue怎么解决跨域问题

1. 前端代理&#xff08;开发环境推荐&#xff09; 适用场景&#xff1a;Vue 开发环境调试时&#xff0c;避免直接请求后端接口的跨域问题。 实现步骤&#xff1a; 在 Vue 项目的 vue.config.js 中配置代理&#xff1a; module.exports {devServer: {proxy: {/api: { // 代理…...

OpenResty反向代理

通过在 OpenResty 的配置文件中定义不同的 location 块&#xff0c;将匹配特定 URL 路径的请求转发到不同的后端 FastAPI 应用&#xff08;即使它们运行在不同的端口或甚至是不同的服务器/容器上&#xff09;。 核心思路&#xff1a; 多个 FastAPI 应用实例&#xff1a; 你的每…...

《Effective Python》第1章 Pythonic 思维详解——深入理解 Python 条件表达式(Conditional Expressions)

《Effective Python》第1章 Pythonic 思维详解——深入理解 Python 条件表达式&#xff08;Conditional Expressions&#xff09; 在 Python 中&#xff0c;条件表达式&#xff08;conditional expressions&#xff09;提供了一种简洁的方式来在一行中实现 if/else 的逻辑。它…...

【Typenum】 3 类型位运算(bit.rs)

一、源码 代码定义了一个类型级别的位&#xff08;bit&#xff09;系统&#xff0c;主要用于编译时的类型运算。 //! 类型级比特位实现 //! //! 这些是基础的比特位类型&#xff0c;作为本库中其他数值类型的构建基础 //! //! 已实现的**类型运算符**&#xff1a; //! //! - …...

python:trimesh 用于 STL 文件解析和 3D 操作

python&#xff1a;trimesh 是一个用于处理三维模型的库&#xff0c;支持多种格式的导入导出&#xff0c;比如STL、OBJ等&#xff0c;还包含网格操作、几何计算等功能。 Python Trimesh 库使用指南 安装依赖库 pip install trimesh Downloading trimesh-4.6.8-py3-none-any.w…...

stm32week15

stm32学习 十一.中断 2.NVIC Nested vectored interrupt controller&#xff0c;嵌套向量中断控制器&#xff0c;属于内核(M3/4/7) 中断向量表&#xff1a;定义一块固定的内存&#xff0c;以4字节对齐&#xff0c;存放各个中断服务函数程序的首地址&#xff0c;中断向量表定…...

数据库分库分表实战指南:从原理到落地

1. 为什么要分库分表&#xff1f; 1.1 单库瓶颈表现 存储瓶颈&#xff1a;单表数据超过5000万行&#xff0c;查询性能急剧下降性能瓶颈&#xff1a;单库QPS超过5000后响应延迟显著增加可用性风险&#xff1a;单点故障导致全系统不可用 1.2 突破性优势 --------------------…...

雷达工程师面试题目

雷达工程师面试题目 一、基础知识类 简述雷达的工作原理 请从电磁波的发射、传播、反射以及回波接收处理等环节,详细阐述雷达如何实现对目标的探测、定位与跟踪。 常见雷达体制及其特点 列举至少三种常见的雷达体制(如脉冲雷达、连续波雷达、相控阵雷达等),并分别说明…...

JVM-类加载子系统

最近在学习JVM&#xff0c;分模块整理一下JVM的笔记 目录 类加载子系统 一、加载 二、链接 1.验证 2.准备 3.解析 三、初始化 类加载子系统 类加载子系统负责将字节码文件加载到虚拟机中&#xff0c;我们正常编写完一个Java类并在前端编译器编译后会生成一个对应的字节码…...

从0开始学习大模型--Day06--大模型的相关网络架构

云服务器 在平时&#xff0c;我们总能听到诸如用服务器跑数据、模型&#xff0c;或者是搭建服务器之类的话&#xff0c;实际上&#xff0c;它相当于一台算力、内存、运行内存等各个方面都很强大的电脑&#xff0c;只需要我们用自己的电脑通过互联网链接他就能使用它&#xff0…...

控制LED灯设备

本章分别使用C库和系统调用的文件操作方式控制开发板的LED灯&#xff0c;展示如何在应用层通过系统提供的设备文件控制相关硬件。 本章的示例代码目录为&#xff1a;base_code/linux_app/led/sys_class_leds。 9.1. LED子系统 在Linux系统中&#xff0c;绝大多数硬件设备都有…...

Three.js + React 实战系列 - 联系方式提交表单区域 Contact 组件✨(表单绑定 + 表单验证)

对个人主页设计和实现感兴趣的朋友可以订阅我的专栏哦&#xff01;&#xff01;谢谢大家&#xff01;&#xff01;&#xff01; 在现代网页中&#xff0c;一个精致的 Contact 区域不仅仅是表单的堆砌&#xff0c;更是用户与我们建立联系的第一印象。 在本节课中&#xff0c;我…...

Python-MCPAgent开发-DeepSeek版本

Python-MCPAgent开发-DeepSeek版本 尝试Windows使用Python完成【McpServer】【McpAgent】开发&#xff0c;当前使用OpenAI-Agents框架进行开发 1-核心知识点 先完成【LLM】配置再完成【McpServer】开发再完成【Agent】开发完成【LLM】【McpServer】【Agent】请求互通 2-思路整…...

Linux:43线程封装与互斥lesson31

mmap文件映射视屏&#xff1a;待看... 目录 线程栈 代码证明&#xff1a;一个线程的数据&#xff0c;其他线程也可以访问 线程封装 简单封装,2.thread Thread.hpp Main.cc Makefile 结果&#xff1a; ​编辑 问题1&#xff1a; 问题2&#xff1a; lamba表达式 模版封…...

stm32测频率占空比最好的方案

频率检测, 方案方法很多种, 其中最快最节省资源的方法. 分享给大家. 其它的方案都试过, 问题多多. 适合单片机在工业应用中, 1MHZ以下的频率检测. 1MHZ估计也行. 但是偏差估计是变大了. 我试过很多种方案, 可以看我前面的文章. 最后发现目前这种方案最为优秀. 主要特点为不占用…...

Redis--常见数据类型List列表

目录 一、概念 二、命令 2.1 LPUSH 2.2 LPUSHX 2.3 RPUSH 2.4 RPUSHX 2.5 LRANGE 2.6 LPOP 2.7 RPOP 2.8 LINDEX 2.9 LINSERT 2.10 LLEN 2.11 阻塞版本命令 三、内部编码 一、概念 列表类型是用来存储多个有序的字符串&#xff0c;列表中的每个字符串称为元素&…...

Linux : 多线程【线程概念】

Linux &#xff1a; 多线程【线程概念】 &#xff08;一&#xff09;线程概念线程是什么用户层的线程linux中PID与LWP的关系 (二) 进程地址空间页表(三) 线程总结线程的优点线程的缺点线程异常线程用途 &#xff08;一&#xff09;线程概念 线程是什么 在一个程序里的一个执行…...

React+Springboot项目部署ESC服务器

记录一下我个人部署Linux服务器的心得 环境介绍 ESC服务器创建时默认安装LNMP&#xff0c;即Linux&#xff0c;Nginx&#xff0c;Mysql&#xff0c;Php 所以这里不讲怎么安装Nignx和Mysql 笔者使用的Linux版本为22.0.4LTS版 前端打包 运行React打包命令进行前端项目的打包…...

python-Pandas库详细教程

python-Pandas库详细教程1 定义使用方法&#xff1a; 一、导入Pandas库代码 二、DataFrame用法Pandas索引 groupby()数值计算 定义 python中特定用于数据分析、处理的模板库。 优点&#xff1a; 处理数据便捷、简单。 使用方法&#xff1a; 处理“.csv”数据&#xff1a;rea…...

力扣刷题Day 46:搜索二维矩阵 II(240)

1.题目描述 2.思路 方法1&#xff1a;分别找到搜索矩阵的右、下边界&#xff0c;然后从[0][0]位置开始遍历这部分矩阵搜索目标值。 方法2&#xff1a;学习Krahets佬的思路&#xff0c;从搜索矩阵的左下角开始遍历&#xff0c;matrix[i][j] > target时消去第i行&#xff0c…...

C++:类和对象4

一&#xff0c;日期类实现 学习建议&#xff1a; 对于计算机学习来说&#xff0c;调试十分重要&#xff0c;所以在日常学习中一定要加大代码练习&#xff0c;刷代码题和课后自己敲出课上代码例题&#xff0c;注意不要去对比正确代码或者网上找正确代码直接使用&#xff0c;一…...

【软件工程】基于机器学习的多缺陷定位

基于机器学习的多缺陷定位&#xff08;Multi-Dault Localization, MDL&#xff09;是软件工程和自动化测试领域的重要研究方向&#xff0c;旨在通过机器学习技术高效识别代码中多个潜在缺陷的位置。以下从方法、挑战、应用场景及未来方向展开分析&#xff1a; 一、核心方法 监督…...

互联网大厂Java求职面试实战:Spring Boot到微服务的技术问答解析

&#x1f4aa;&#x1f3fb; 1. Python基础专栏&#xff0c;基础知识一网打尽&#xff0c;9.9元买不了吃亏&#xff0c;买不了上当。 Python从入门到精通 &#x1f601; 2. 毕业设计专栏&#xff0c;毕业季咱们不慌忙&#xff0c;几百款毕业设计等你选。 ❤️ 3. Python爬虫专栏…...

LLMs之MCP:2025年5月2日,Anthropic 宣布 Claude 重大更新:集成功能上线,研究能力大幅提升

LLMs之MCP&#xff1a;2025年5月2日&#xff0c;Anthropic 宣布 Claude 重大更新&#xff1a;集成功能上线&#xff0c;研究能力大幅提升 导读&#xff1a;2025年5月2日&#xff0c;Anthropic 宣布 Claude 推出 Integrations 集成功能和增强型高级研究功能。Integrations 基于 …...

飞蛾扑火算法matlab实现

注意&#xff1a;此代码实现的是求目标函数最大值&#xff0c;求最小值可将适应度函数乘以-1&#xff08;框架代码已实现&#xff09;。 注意&#xff1a;此代码实现的是求目标函数最大值&#xff0c;求最小值可将适应度函数乘以-1&#xff08;框架代码已实现&#xff09;。 注…...

vector--OJ1

链接: link class Solution { public:int singleNumber(vector<int>& nums) {int ret0;for(auto a : nums){ret^a;}return ret;} };链接: link class Solution { public:vector<vector<int>> generate(int numRows) {vector<vector<int>>…...

多模态大语言模型arxiv论文略读(六十八)

Image-of-Thought Prompting for Visual Reasoning Refinement in Multimodal Large Language Models ➡️ 论文标题&#xff1a;Image-of-Thought Prompting for Visual Reasoning Refinement in Multimodal Large Language Models ➡️ 论文作者&#xff1a;Qiji Zhou, Ruoc…...

【数据库知识】Mysql进阶-高可用MHA(Master High Availability)方案

mysql高可用MHA&#xff08;Master High Availability&#xff09;方案 集群部署模式下的高可用方案一、高可用架构原理1. 核心组件2. 故障切换流程 二、详细部署步骤 (3节点集群)1. 环境准备2. 节点配置&#xff08;以 node1 为例&#xff09;3. 初始化集群4. 部署MySQL Route…...

类型别名与接口的对比与选择

在 TypeScript 中&#xff0c;类型系统是非常强大且灵活的。两种最常用的类型定义方式就是 类型别名&#xff08;type&#xff09; 和 接口&#xff08;interface&#xff09;。它们看似相似&#xff0c;实际上在用法和功能上有所不同。在本文中&#xff0c;我们将深入探讨类型…...

《Effective Python》第1章 Pythonic 思维详解——始终用括号包裹单元素元组

《Effective Python》第1章 Pythonic 思维详解——始终用括号包裹单元素元组 在 Python 编程语言中&#xff0c;元组&#xff08;tuple&#xff09;是一种不可变的数据结构&#xff0c;常用于表示一组固定的值。尽管元组的语法看似简单&#xff0c;但其中却隐藏着一些微妙的陷…...

【计算机视觉】OpenCV实战项目:ETcTI_smart_parking智能停车系统深度解析

ETcTI_smart_parking智能停车系统深度解析 1. 项目概述2. 技术原理与系统架构2.1 核心算法1) 车牌识别算法2) ETC交易验证 2.2 系统架构 3. 实战部署指南3.1 环境配置3.2 硬件部署规范3.3 系统初始化 4. 常见问题与解决方案4.1 ETC交易失败4.2 车牌识别异常4.3 系统性能瓶颈 5.…...

LintCode第807题-回文数II

描述 判断一个非负整数 n 的二进制表示是否为回文数 我们保证 0 < n < 2^32 - 1 样例1 输入: n 0 输出: True 解释: 0 的二进制表示为&#xff1a;0。 样例2 输入: n 3 输出: True 解释: 3 的二进制表示为&#xff1a;11。 样例3 输入: n 4 输出: False 解释:…...

快速傅里叶变换暴力涨点!基于时频特征融合的高创新时间序列分类模型

往期精彩内容&#xff1a; 单步预测-风速预测模型代码全家桶-CSDN博客 半天入门&#xff01;锂电池剩余寿命预测&#xff08;Python&#xff09;-CSDN博客 超强预测模型&#xff1a;二次分解-组合预测-CSDN博客 VMD CEEMDAN 二次分解&#xff0c;BiLSTM-Attention预测模型…...

股指期货的保证金交易和资金门槛是多少?

股指期货和股票交易最大的区别&#xff0c;就是它不用“全款买房”&#xff0c;而是“首付买房”——只需交一笔保证金就能撬动大额资金&#xff0c;但这也说明了门槛高、风险大。下面就来拆解&#xff0c;到底要准备多少钱才能“上车”。 一、保证金交易&#xff1a;用12万撬…...

spark:map 和 flatMap 的区别(Scala)

场景设定 假设有一个包含句子的 RDD&#xff1a; scala val rdd sc.parallelize(List("Hello World", "Hi Spark")) 目标是&#xff1a;将每个句子拆分成单词。 1. 用 map 的效果 代码示例 scala val resultMap rdd.map(sentence > sentence…...

判断两台设备是否在同一局域网内的具体方法

以下是判断两台设备是否在同一局域网内的具体方法&#xff1a; 1. 检查IP地址和子网掩码 操作步骤&#xff1a; Windows系统&#xff1a; 按 Win R 键&#xff0c;输入 cmd 并回车。输入 ipconfig&#xff0c;查看 IPv4 地址 和 子网掩码&#xff08;如 192.168.1.5/255.255.2…...

cmake:test project

本文主要探讨cmake在测试和项目中的应用。 add_test add_test(NAME <name> COMMAND <command> [<arg>...] [CONFIGURATIONS <config>...] [WORKING_DIRECTORY <dir>] [COMMAND_EXPAND_LISTS])  add_test(NAME test_uni COMMAND $<TARGET_F…...

Qwen-2.5 omni

问题1 Qwen2.5-Omni的主要功能是什么&#xff1f; Qwen2.5-Omni的主要功能是处理和生成多种模态的数据&#xff0c;包括文本、图像、音频和视频。它能够同时理解和生成这些模态的信息&#xff0c;支持复杂的多模态任务&#xff0c;例如语音对话、视频理解、图像描述生成等。 …...

Problem D: 异常2

1.题目描述 检查危险品程序&#xff1a;生成货物类、机器类&#xff0c;货物类有属性name&#xff0c;机器类有检测的check方法&#xff0c;若货物名称是炸弹、毒药、刀具&#xff0c;则抛出异常提示。 代码如下&#xff1a; import java.util.Scanner; class goods{ Stri…...

AI智慧公园管理方案:用科技重塑市民的“夜游体验”

AI智慧公园管理方案&#xff1a;多场景智能巡检与安全防控 一、背景与痛点分析 夏季夜间&#xff0c;公园成为市民休闲娱乐的核心场所&#xff0c;但管理难度随之激增&#xff1a; 宠物管理失控&#xff1a;未牵绳宠物进入园区&#xff0c;随地排泄、惊扰游客&#xff0c;甚…...

AJAX原理

AJAX使用XHR 对象和服务器进行数据交互 XHR <p class"my-p"></p><script>const xhr new XMLHttpRequest()xhr.open(GET,http://hmajax.itheima.net/api/province)xhr.addEventListener(loadend,()>{// console.log(xhr.response)const data …...

内存泄露,如何判断是资源泄露还是堆栈泄露?

作为软件测试工程师,判断内存泄露类型对于定位和解决问题至关重要。以下是区分资源泄露和堆栈泄露的方法: 1. 基本概念区分 资源泄露(Resource Leak): 指非内存资源未正确释放,如文件句柄、数据库连接、网络套接字等 虽然不直接表现为Java堆内存增长,但会导致系统资源耗…...

无人甘蔗小车履带式底盘行走系统的研究

1.1 研究背景与意义 1.1.1 研究背景 甘蔗作为全球最重要的糖料作物之一&#xff0c;在农业经济领域占据着举足轻重的地位。我国是甘蔗的主要种植国家&#xff0c;尤其是广西、广东、云南等地&#xff0c;甘蔗种植面积广泛&#xff0c;是当地农业经济的重要支柱产业。甘蔗不仅…...

Redis设计与实现——单机Redis实现

RedisDB RedisDB的核心结构 键空间&#xff08;dict*dict&#xff09; 结构&#xff1a;哈希表&#xff08;字典&#xff09;&#xff0c;键为字符串对象&#xff08;SDS&#xff09;&#xff0c;值为 Redis 对象&#xff08;字符串、列表、哈希等&#xff09;。 功能&#x…...

ES C++客户端安装及使用

介绍 Elasticsearch &#xff0c; 简称 ES &#xff0c;它是个开源分布式搜索引擎&#xff0c;它的特点有&#xff1a;分布式&#xff0c;零配置&#xff0c;自动发现&#xff0c;索引自动分片&#xff0c;索引副本机制&#xff0c;restful 风格接口&#xff0c;多数据源&…...

C++学习之STL学习

在经过前面的简单的C入门语法的学习后&#xff0c;我们开始接触C最重要的组成部分之一&#xff1a;STL 目录 STL的介绍 什么是STL STL的历史 UTF-8编码原理&#xff08;了解&#xff09; UTF-8编码原理 核心编码规则 规则解析 编码步骤示例 1. 确定码点范围 2. 转换为…...

【东枫科技】使用LabVIEW进行NVIDIA CUDA GPU 开发

文章目录 工具包 CuLab - LabVIEW 的 GPU 工具包特性和功能功能亮点类似 LabVIEW 的 GPU 代码开发支持的功能数值类型和维数开发系统要求授权售价 工具包 CuLab - LabVIEW 的 GPU 工具包 CuLab 是一款非常直观易用的 LabVIEW 工具包&#xff0c;旨在加速 Nvidia GPU 上的计算密…...

LangChain对话链:打造智能多轮对话机器人

LangChain对话链:打造智能多轮对话机器人 目录 LangChain对话链:打造智能多轮对话机器人ConversationChain 是什么核心功能与特点基本用法示例内存机制自定义提示词应用场景与其他链的结合`SequentialChain` 是什么![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/0…...

MIT 6.S081 2020 Lab3 page tables 个人全流程

文章目录 零、写在前面1、关于页表2、RISC-V Rv39页表机制3、虚拟地址设计4、页表项设计5、访存流程6、xv6 的页表切换7、页表遍历 一、Print a page table1.1 说明1.2 实现 二、A kernel page table per process2.1 说明2.2 初始化 / 映射相关2.3 用户内核页表的创建和回收2.4…...

spring cloud loadbalancer实现机房感知的负载均衡

1 概述 在同城多机房情景下&#xff0c;各个机房各自部署一套微服务集群&#xff0c;正常情况下微服务调用在本机房闭环。在如下某些灾难情景&#xff0c;可以尝试拉远调用以最大程度维持业务连续性&#xff0c;这些情景例如&#xff1a; A机房多个服务器宕机。应用由于BUG发…...