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

vue2/3,Spring Boot以及生产环境跨域解决方案

vue2和vue3跨域解决方案

Vue 2 (基于 Webpack) 的跨域解决方案

1. 创建或编辑 vue.config.js 文件

Vue CLI为Webpack项目提供了简单的代理配置方式。你可以通过创建或编辑项目的根目录下的 vue.config.js 文件来设置开发服务器的代理规则:

// vue.config.js
module.exports = {devServer: {proxy: {'/api': { // 代理路径前缀target: 'http://backend.example.com', // 后端API的地址changeOrigin: true,                   // 更改请求源pathRewrite: { '^/api': '' },         // 重写路径,去掉/api前缀secure: false,                        // 如果后端是HTTPS,则设置为true,默认falselogLevel: 'debug'                     // 设置日志级别,方便调试}}}
};

2. 修改前端请求代码

确保你的前端请求都通过 /api 前缀发送,这样它们会被正确代理到后端服务器:

// 在Vue组件或API服务中
import axios from 'axios';export function fetchDepartments() {return axios.get('/api/depts').then(response => response.data).catch(error => console.error('There was an error!', error));
}

Vue 3 (基于 Vite) 的跨域解决方案

Vite使用了一种不同的方式来处理开发服务器的代理配置。它没有像Webpack那样内置的代理配置选项,但可以通过修改 vite.config.js 来实现相同的功能。

使用 Vite 的代理配置

1. 创建或编辑 vite.config.js 文件

你需要在 vite.config.js 中定义一个 server.proxy 属性:

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {proxy: {'/api': {target: 'http://backend.example.com',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, ''),},},},
});

2. 修改前端请求代码

同Vue 2一样,确保所有对后端的请求都通过 /api 前缀来发送:

// 在Vue组件或API服务中
import axios from 'axios';export function fetchDepartments() {return axios.get('/api/depts').then(response => response.data).catch(error => console.error('There was an error!', error));
}

Spring Boot 中的 CORS 配置详解

方法 1:使用 @CrossOrigin 注解(局部配置)

@CrossOrigin 注解是最简单的方式,适用于需要为特定控制器或方法启用CORS的情况。你可以通过在控制器类或方法上添加这个注解来实现。

局部配置示例

// src/main/java/com/example/demo/controller/MyController.java
package com.example.demo.controller;import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.http.ResponseEntity;
import java.util.Arrays;
import java.util.List;@RestController
@RequestMapping("/api/depts")
@CrossOrigin(origins = "https://example.com", maxAge = 3600) // 允许的源及缓存时间
public class MyController {@GetMappingpublic ResponseEntity<List<String>> getDepts() {List<String> depts = Arrays.asList("HR", "Finance", "IT");return ResponseEntity.ok(depts);}
}

注意事项

  • origins:指定允许的源。
  • maxAge:预检请求的结果可以被缓存的时间(以秒为单位)。
  • allowedHeaders:可选,指定允许的HTTP头。
  • methods:可选,指定允许的HTTP方法。
  • exposedHeaders:可选,指定哪些响应头可以暴露给浏览器。
  • allowCredentials:是否允许凭证(如Cookies)。如果设置为 true,则不能使用通配符 * 作为源。

完整注解参数

@CrossOrigin(origins = {"https://example.com"}, methods = {RequestMethod.GET, RequestMethod.POST},allowedHeaders = {"Authorization", "Content-Type"},exposedHeaders = {"X-Custom-Header"},allowCredentials = "true",maxAge = 3600
)

方法 2:全局配置 CORS(WebMvcConfigurer)

如果你想要为所有端点配置CORS,或者定义多个CORS配置,可以通过实现 WebMvcConfigurer 接口并重写 addCorsMappings 方法来进行全局配置。

全局配置示例

// src/main/java/com/example/demo/config/WebConfig.java
package com.example.demo.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;@Configuration
public class WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**") // 匹配所有路径.allowedOrigins("https://example.com") // 允许的源.allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS") // 允许的HTTP方法.allowedHeaders("*") // 允许的HTTP头.allowCredentials(true) // 是否允许凭证.maxAge(3600); // 预检请求结果缓存时间(秒)}
}

注意事项

  • allowedOrigins:指定允许的源,可以是一个具体的URL,也可以是通配符 * 表示允许所有源。但是,如果你启用了凭证共享 (allowCredentials=true),则不能使用通配符 *
  • allowedMethods:指定允许的HTTP方法。
  • allowedHeaders:指定允许的HTTP头。
  • allowCredentials:如果设置为 true,则意味着响应将包含 Access-Control-Allow-Credentials 头,这会告诉浏览器是否允许发送凭证信息(例如cookies)。如果启用了凭证,则不能将 allowedOrigins 设置为 *
  • maxAge:预检请求的结果可以被缓存的时间(以秒为单位)。

多路径配置示例

如果你需要为不同路径设置不同的CORS规则,可以在 addCorsMappings 方法中注册多个映射:

@Override
public void addCorsMappings(CorsRegistry registry) {registry.addMapping("/api/**").allowedOrigins("https://example.com").allowedMethods("GET", "POST").allowedHeaders("Authorization", "Content-Type").allowCredentials(true).maxAge(3600);registry.addMapping("/admin/**").allowedOrigins("https://admin.example.com").allowedMethods("GET", "POST", "PUT", "DELETE").allowedHeaders("*").allowCredentials(false).maxAge(3600);
}

方法 3:通过 CorsFilter 配置

对于更复杂的场景,比如你需要对不同的路径应用不同的CORS规则,或者你希望在应用程序启动时就注册CORS过滤器,你可以创建一个 CorsConfigurationSource 并注册一个 CorsFilter

自定义 CorsFilter 示例

// src/main/java/com/example/demo/config/CorsConfig.java
package com.example.demo.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();// Path 1: /api/*CorsConfiguration apiConfig = new CorsConfiguration();apiConfig.setAllowCredentials(true);apiConfig.addAllowedOrigin("https://example.com");apiConfig.addAllowedHeader("Authorization");apiConfig.addAllowedHeader("Content-Type");apiConfig.addAllowedMethod("GET");apiConfig.addAllowedMethod("POST");source.registerCorsConfiguration("/api/**", apiConfig);// Path 2: /admin/*CorsConfiguration adminConfig = new CorsConfiguration();adminConfig.setAllowCredentials(false);adminConfig.addAllowedOrigin("https://admin.example.com");adminConfig.addAllowedHeader("*");adminConfig.addAllowedMethod("*");source.registerCorsConfiguration("/admin/**", adminConfig);return new CorsFilter(source);}
}

多路径配置示例

如果你有多个路径需要不同的CORS规则,可以在 UrlBasedCorsConfigurationSource 中注册多个配置:

@Bean
public CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();// Path 1: /api/*CorsConfiguration apiConfig = new CorsConfiguration();apiConfig.setAllowCredentials(true);apiConfig.addAllowedOrigin("https://example.com");apiConfig.addAllowedHeader("Authorization");apiConfig.addAllowedHeader("Content-Type");apiConfig.addAllowedMethod("GET");apiConfig.addAllowedMethod("POST");source.registerCorsConfiguration("/api/**", apiConfig);// Path 2: /admin/*CorsConfiguration adminConfig = new CorsConfiguration();adminConfig.setAllowCredentials(false);adminConfig.addAllowedOrigin("https://admin.example.com");adminConfig.addAllowedHeader("*");adminConfig.addAllowedMethod("*");source.registerCorsConfiguration("/admin/**", adminConfig);return new CorsFilter(source);
}

高级配置选项

1. 处理凭证共享

当你需要处理凭证(如Cookies)时,确保正确设置了 allowCredentialsallowedOrigins。记住,如果启用了凭证共享,你不能使用通配符 * 作为允许的源。

config.setAllowCredentials(true);
config.addAllowedOrigin("https://example.com"); // 必须明确指定源
2. 处理复杂头部

有时你需要处理特定的HTTP头部,而不是简单的通配符。你可以通过 setAllowedHeaders 方法来指定允许的头部。

config.addAllowedHeader("Authorization");
config.addAllowedHeader("Content-Type");
3. 处理多种来源

如果你有多个允许的来源,可以使用 setAllowedOrigins 方法来添加多个源。

config.addAllowedOrigin("https://example.com");
config.addAllowedOrigin("https://anotherdomain.com");
4. 处理预检请求

预检请求(Preflight Requests)是在某些跨域请求之前由浏览器自动发送的,用于检查服务器是否允许实际请求。你可以通过 setAllowCredentialssetMaxAge 来控制这些行为。

config.setAllowCredentials(true);
config.setMaxAge(3600L); // 缓存预检请求结果的时间(秒)
5. 暴露特定响应头

有时候你需要让客户端能够访问某些特定的响应头。你可以通过 setExposedHeaders 方法来指定这些响应头。

config.setExposedHeaders(Arrays.asList("X-Custom-Header"));

生产环境下的解决方案

1. 使用 Nginx 反向代理

Nginx 是一个高性能的HTTP和反向代理服务器,它可以帮助你将前端请求转发到后端API服务器,同时处理跨域问题。通过这种方式,你可以确保所有的请求都来自同一个域名,从而避免浏览器的同源策略限制。

Nginx 配置示例

假设你的前端应用部署在 http://example.com,而后端API位于 http://backend.example.com。你可以使用Nginx来设置反向代理:

# /etc/nginx/sites-available/example.com
server {listen 80;server_name example.com;location / {# 将所有前端静态资源请求指向Vue构建的静态文件目录root /var/www/html/dist;try_files $uri $uri/ /index.html;}location /api/ {# 将/api/开头的请求转发给后端API服务器proxy_pass http://backend.example.com/;proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;}
}

步骤:

  1. 安装 Nginx(如果尚未安装):

    sudo apt update
    sudo apt install nginx
  2. 配置 Nginx

    • 创建或编辑 /etc/nginx/sites-available/example.com 文件。
    • 使用上述配置示例进行修改,确保路径和域名正确。
  3. 启用站点配置

    sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
  4. 测试配置并重启 Nginx

    sudo nginx -t
    sudo systemctl restart nginx
  5. 部署前端静态文件

    • 将Vue构建后的静态文件放置在 /var/www/html/dist 目录下。
  6. 确保后端API服务器正常运行

    • 确认 http://backend.example.com 可以访问,并且API服务正常工作。

2. 前后端部署在同一域名下

如果可能的话,将前后端部署在同一域名下是解决跨域问题的最佳实践之一。这样做可以完全避免跨域问题,因为所有请求都来自同一源。

示例:

  • 前端:部署在 https://example.com
  • 后端API:部署在 https://api.example.com

如果你使用的是子域名(如 api.example.com),你可以通过DNS配置和SSL证书来确保它们被视为同一源。另外,也可以考虑将API路由集成到主域名中(例如 https://example.com/api)。

相关文章:

vue2/3,Spring Boot以及生产环境跨域解决方案

vue2和vue3跨域解决方案 Vue 2 (基于 Webpack) 的跨域解决方案 1. 创建或编辑 vue.config.js 文件 Vue CLI为Webpack项目提供了简单的代理配置方式。你可以通过创建或编辑项目的根目录下的 vue.config.js 文件来设置开发服务器的代理规则&#xff1a; // vue.config.js mod…...

【centos8 镜像修改】centos8 镜像修改阿里云

要将 CentOS 8 的镜像源修改为阿里云镜像&#xff0c;你需要编辑 /etc/yum.repos.d/ 目录下的 .repo 文件。以下是具体的步骤&#xff1a; 备份原始的 .repo 文件&#xff1a; 在编辑之前&#xff0c;建议备份原始的 .repo 文件&#xff0c;以便在出现问题时可以恢复。 sudo cp…...

多线程编程初探:掌握基本概念与核心原理

目录 1 初识线程 1.1 线程的由来 1.2 线程的产生 1.3 进程 VS 线程 1.4 关于系统内部关于线程和进程的资源调度问题 2 页表、虚拟地址和物理地址 2.1 对物理地址的描述 2.2 对于页表设计的解析 3 线程的控制 3.1 进程创建 3.1.1 pthread_create 3.2 线程退出 3.2.1 主…...

【信息系统项目管理师】第13章:项目资源管理过程详解

更多内容请见: 备考信息系统项目管理师-专栏介绍和目录 文章目录 一、规划资源管理1、输入2、工具与技术3、输出二、估算活动资源1、输入2、工具与技术3、输出三、获取资源1、输入2、工具与技术3、输出四、建设团队1、输入2、工具与技术3、输出五、管理团队1、输入2、工具与技…...

vue3封装而成的APP ,在版本更新后,页面显示空白

一、问题展示 更新之后页面空白&#xff0c;打不开 &#xff0c;主要是由于缓存造成的 二、解决办法 1、随机数代码实现 使用随机数来动态的生成静态资源目录名可以避免浏览器缓存&#xff0c;但同时每次也会导致浏览器每次都下载最新的资源。如果静态资源过大&#xff0c;可…...

GEE云计算、多源遥感、高光谱遥感技术蓝碳储量估算;红树林植被指数计算及提取

大气温室气体浓度不断增加&#xff0c;导致气候变暖加剧&#xff0c;随之会引发一系列气象、生态和环境灾害。如何降低温室气体浓度和应对气候变化已成为全球关注的焦点。海洋是地球上最大的“碳库”,“蓝碳”即海洋活动以及海洋生物&#xff08;特别是红树林、盐沼和海草&…...

【知识】cuda检测GPU是否支持P2P通信及一些注意事项

转载请注明出处&#xff1a;小锋学长生活大爆炸[xfxuezhagn.cn] 如果本文帮助到了你&#xff0c;欢迎[点赞、收藏、关注]哦~ 代码流程 先检查所有GPU之间是否支持P2P通信&#xff1b;然后尝试启用GPU之间的P2P通信&#xff1b;再次检查所有GPU之间是否支持P2P通信。 test.cu&…...

用 Python 生成功能强大的二维码工具(支持自定义颜色与 Logo)

在很多项目中&#xff0c;二维码作为一种便捷的方式传递信息越来越常见。今天&#xff0c;我们将介绍如何用 Python 编写一个功能更全的二维码生成工具&#xff0c;它不仅支持自定义二维码的颜色&#xff0c;还能在二维码中间添加 logo。 1. 环境准备 首先&#xff0c;我们需…...

RTX5 数据队列传输流程

1、首先获取当前内存是否有值 rptr = (net_mpool_t*)osMemoryPoolAlloc(id_mp_net,0U); 说明:通过相同的key,可以操作值。 2、设值到队列中 如果有值,则将rptr变量的值放入消息队列id_mp_net rptr->len = USART2_RxBfr[0]+1;memcpy (rptr->Recvbuf, &USART2_Rx…...

24.try块怎么用 C#例子

这是一个用英语写的try-catch例子 简单来说就是一个try&#xff0c;try里面的代码可能会出错&#xff0c;然后有两个catch&#xff0c;规定了具体的错误是什么 如果发生相应的错误&#xff0c;就会把错误信息存到err里&#xff0c;err.Message是一个字符串格式的提示信息&…...

【机器学习 | 数据挖掘】智能推荐算法

【作者主页】Francek Chen 【专栏介绍】 ⌈ ⌈ ⌈智能大数据分析 ⌋ ⌋ ⌋ 智能大数据分析是指利用先进的技术和算法对大规模数据进行深入分析和挖掘&#xff0c;以提取有价值的信息和洞察。它结合了大数据技术、人工智能&#xff08;AI&#xff09;、机器学习&#xff08;ML&a…...

120.【C语言】数据结构之快速排序(详解Hoare排序算法)

目录 1.Hoare单趟排序思想 2.单趟排序代码 初次写的代码 运行结果 查找问题原因 尝试解决问题 初次修正后代码 运行结果 正确的单趟排序代码 3.将单趟排序嵌入 如何递归? 递归结束的条件 1.较容易分析的结束条件:leftright 2.以{2,1}为例分析另一个结束条件 完整…...

uniapp通过v-if进行判断时,会出现闪屏?【已解决】

1.问题&#xff1a;按钮切换时&#xff0c;通过v-if来判断&#xff0c;会出现闪烁情况&#xff0c;影响用户体验 2.v-if 闪烁问题可能的原因 ‌条件切换频繁‌&#xff1a;如果 v-if 指令的条件在短时间内频繁切换&#xff0c;会导致元素不断被销毁和重新创建&#xff0c;从而…...

各种网站(学习资源、常用工具及其他,持续更新中~)

欢迎围观笔者的个人博客~ 也欢迎通过RSS网址https://kangaroogao.github.io/atom.xml进行订阅~ 大学指南 上海交通大学生存手册中国科学技术大学人工智能与数据科学学院本科进阶指南USTC不完全入学指南大学生活质量指北科研论 信息搜集 AI信息搜集USTC飞跃网站计算机保研 技…...

网络技术-QoS策略以及如何定义 流分类,流行为,流策略

一&#xff1a;QoS策略简介 QoS策略由如下部分组成&#xff1a; 类&#xff0c;定义了对报文进行识别的规则。 流行为&#xff0c;定义了一组针对类识别后的报文所做的QoS动作。 通过将类和流行为关联起来&#xff0c;QoS策略可对符合分类规则的报文执行流行为中定义的…...

线程晨考day20

1.线程的五种状态 创建 就绪 运行 阻塞 死亡 2.创建线程的两种方式 继承Thread类 重写run方法 实现Runnable接口 重写run方法 3.调用start和调用run方法的区别 调用start方法表示会开启新的线程 run方法不会开启新的线程 4.线程调度常用的方法 sleep() join() yield() 5.进程和…...

【ES6复习笔记】迭代器(10)

什么是迭代器&#xff1f; 迭代器&#xff08;Iterator&#xff09;是一种对象&#xff0c;它能够遍历并访问一个集合中的元素。在 JavaScript 中&#xff0c;迭代器提供了一种统一的方式来处理各种集合&#xff0c;如数组、字符串、Map、Set 等。通过迭代器&#xff0c;我们可…...

MySQL的TIMESTAMP类型字段非空和默认值属性的影响

同事说他通过某款商业数据同步软件将一个 MySQL 5.7.28 的库同步到 MySQL 5.7.20 的库时&#xff0c;如果表中含有 TIMESTAMP 数据类型、缺省值为 current_timestamp 的字段&#xff0c;这些表的同步任务就都失败了&#xff0c;而另外的一些包含了 DATETIME 数据类型的表就同步…...

【Linux进程】初悉进程

学习编程就得循环渐进&#xff0c;扎实基础&#xff0c;勿在浮沙筑高台 循环渐进Forward-CSDN博客 进程调度简介 1.2进程查看命令 1.3进程的几个要素 二、进程的生命周期 2.1进程状态文字描述 2.2进程状态的切换 2.3task_struct数据结构 2.4进程优先级 ⑴优先级的代…...

Python学习之路(5)— 使用C扩展

Python学习之路&#xff08;5&#xff09;— 使用C扩展 一、前言 参考&#xff1a;https://www.cnblogs.com/yinguo/p/4641349.html Python C扩展是指用C语言编写的代码&#xff0c;然后编译成Python可以调用的库。这样可以提高Python代码的执行效率&#xff0c;或者实现某些…...

conda相比python好处

Conda 作为 Python 的环境和包管理工具&#xff0c;相比原生 Python 生态&#xff08;如 pip 虚拟环境&#xff09;有许多独特优势&#xff0c;尤其在多项目管理、依赖处理和跨平台兼容性等方面表现更优。以下是 Conda 的核心好处&#xff1a; 一、一站式环境管理&#xff1a…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】

1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件&#xff08;System Property Definition File&#xff09;&#xff0c;用于声明和管理 Bluetooth 模块相…...

leetcodeSQL解题:3564. 季节性销售分析

leetcodeSQL解题&#xff1a;3564. 季节性销售分析 题目&#xff1a; 表&#xff1a;sales ---------------------- | Column Name | Type | ---------------------- | sale_id | int | | product_id | int | | sale_date | date | | quantity | int | | price | decimal | -…...

ardupilot 开发环境eclipse 中import 缺少C++

目录 文章目录 目录摘要1.修复过程摘要 本节主要解决ardupilot 开发环境eclipse 中import 缺少C++,无法导入ardupilot代码,会引起查看不方便的问题。如下图所示 1.修复过程 0.安装ubuntu 软件中自带的eclipse 1.打开eclipse—Help—install new software 2.在 Work with中…...

OpenLayers 分屏对比(地图联动)

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能&#xff0c;和卷帘图层不一样的是&#xff0c;分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

Docker 本地安装 mysql 数据库

Docker: Accelerated Container Application Development 下载对应操作系统版本的 docker &#xff1b;并安装。 基础操作不再赘述。 打开 macOS 终端&#xff0c;开始 docker 安装mysql之旅 第一步 docker search mysql 》〉docker search mysql NAME DE…...