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）时，确保正确设置了 allowCredentials 和 allowedOrigins。记住，如果启用了凭证共享，你不能使用通配符 * 作为允许的源。

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）是在某些跨域请求之前由浏览器自动发送的，用于检查服务器是否允许实际请求。你可以通过 setAllowCredentials 和 setMaxAge 来控制这些行为。

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）。

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

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

相关文章

代码模拟打字机（python）

代码模拟打字机（python）

回车符\r打印稿纸&#xff0c;time.sleep模拟停顿效果&#xff0c;一顿一顿的打字机效果就此呈现。 (笔记模板由python脚本于2024年12月27日 19:34:37创建&#xff0c;本篇笔记适合有基础编程能力的coder翻阅) 【学习的细节是欢悦的历程】 Python 官网&#xff1a;https://www.…
阅读更多...
让 AMD GPU 在大语言模型推理中崭露头角：机遇与挑战

让 AMD GPU 在大语言模型推理中崭露头角：机遇与挑战

在当今科技飞速发展的时代&#xff0c;大语言模型&#xff08;LLM&#xff09;的兴起彻底改变了人工智能领域的格局。从智能客服到文本生成&#xff0c;从知识问答到代码编写辅助&#xff0c;大语言模型的应用无处不在&#xff0c;深刻影响着我们的生活和工作。然而&#xff0c…
阅读更多...
LLMs之o3：《Deliberative Alignment: Reasoning Enables Safer Language Models》翻译与解读

LLMs之o3：《Deliberative Alignment: Reasoning Enables Safer Language Models》翻译与解读

LLMs之o3&#xff1a;《Deliberative Alignment: Reasoning Enables Safer Language Models》翻译与解读 导读&#xff1a;2024年12月&#xff0c;这篇论文提出了一种名为“审慎式对齐 (Deliberative Alignment)”的新方法&#xff0c;旨在提高大型语言模型 (LLM) 的安全性。论…
阅读更多...
音视频入门基础：MPEG2-TS专题（24）——FFmpeg源码中，显示TS流每个packet的pts、dts的实现

音视频入门基础：MPEG2-TS专题（24）——FFmpeg源码中，显示TS流每个packet的pts、dts的实现

音视频入门基础&#xff1a;MPEG2-TS专题系列文章&#xff1a; 音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;1&#xff09;——MPEG2-TS官方文档下载 音视频入门基础&#xff1a;MPEG2-TS专题&#xff08;2&#xff09;——使用FFmpeg命令生成ts文件 音视频入门基础…
阅读更多...
微信流量主挑战：用户破16！新增文档转换（新纪元3）

微信流量主挑战：用户破16！新增文档转换（新纪元3）

朋友们&#xff0c;报告好消息&#xff01;我的小程序用户数量已经涨到16个了&#xff01;没错&#xff0c;真没拉朋友圈亲戚好友来撑场子&#xff0c;全靠实力&#xff08;和一点点运气&#xff09;吸引了16位陌生小伙伴光临&#xff01;这波进步&#xff0c;连我自己都感动了…
阅读更多...
顶顶通呼叫中心中间件mod_cti模块安全增强，预防盗打风险(mod_cti基于FreeSWITCH)

顶顶通呼叫中心中间件mod_cti模块安全增强，预防盗打风险(mod_cti基于FreeSWITCH)

文章目录 前言联系我们mod_cti版本支持安全加强说明 前言 FreeSWITCH暴露在公网最大的风险就是被不法之人盗打 出现盗打的主要原因以下几点&#xff1a; 分机密码太简单或者密码泄露了拨号方案配置不合理sofia配置错误 所以我们给顶顶通呼叫中心中间件添加了安全加强功能&am…
阅读更多...
【Halcon】例程讲解：基于形状匹配与OCR的多图像处理（附图像、程序下载链接）

【Halcon】例程讲解：基于形状匹配与OCR的多图像处理（附图像、程序下载链接）

1. 开发需求 在参考图像中定义感兴趣区域&#xff08;ROI&#xff09;&#xff0c;用于形状匹配和文本识别。通过形状匹配找到图像中的目标对象位置。对齐多幅输入图像&#xff0c;使其与参考图像保持一致。在对齐后的图像上进行OCR识别&#xff0c;提取文本和数字信息。以循环…
阅读更多...
产品初探Devops！以及AI如何赋能Devops？

产品初探Devops！以及AI如何赋能Devops？

DevOps源自Development&#xff08;开发&#xff09;和Operations&#xff08;运维&#xff09;的组合&#xff0c;是一种新的软件工程理念&#xff0c;旨在打破传统软件工程方法中“开发->测试->运维”的割裂模式&#xff0c;强调端到端高效一致的交付流程&#xff0c;实…
阅读更多...
python+PyMuPDF库：(一)创建pdf文件及内容读取和写入

python+PyMuPDF库：(一)创建pdf文件及内容读取和写入

目录 文档操作 打开文档 获取文档信息 删除页 复制页 移动页 选择重构合并 保存关闭 页对象操作 内容读取 获取页对象的字体样式 插入文本标签 插入文本内容 字体设置 insert_text添加文本 insert_textbox添加文本 插入图片 获取页面注释、链接、表单字段 …
阅读更多...
开源诊断工具Arthas

开源诊断工具Arthas

说明&#xff1a; 1、需要先要安装配置好jdk。 2、你的虚拟机得有网&#xff0c;没有网就按照压缩包上传解压。然后直接看三 一、官网 https://arthas.aliyun.com/doc/quick-start.html#_1-%E5%90%AF%E5%8A%A8-math-game 二、下载和卸载 # 下载 curl -O https://arthas.al…
阅读更多...
VisionPro开发使用交互反馈系统(Affordance System)

VisionPro开发使用交互反馈系统(Affordance System)

XR Interaction Toolkit 提供了一个affordance system 可供性系统&#xff0c;使用户能够创建对交互状态的视觉和听觉反馈。一般的信息流从向Affordance State Provider场景中添加一个&#xff08;通常是可交互的&#xff09;并将其指向我们要监视其交互状态的可交互对象开始。…
阅读更多...
如何在 Ubuntu 22.04 上安装并开始使用 RabbitMQ

如何在 Ubuntu 22.04 上安装并开始使用 RabbitMQ

简介 消息代理是中间应用程序&#xff0c;在不同服务之间提供可靠和稳定的通信方面发挥着关键作用。它们可以将传入的请求存储在队列中&#xff0c;并逐个提供给接收服务。通过以这种方式解耦服务&#xff0c;你可以使其更具可扩展性和性能。 RabbitMQ 是一种流行的开源消息代…
阅读更多...
力扣矩阵-算法模版总结

力扣矩阵-算法模版总结

lc-73.矩阵置零-(时隔14天)-12.27 思路&#xff1a;(23min22s) 1.直接遍历遇0将行列设0肯定不行&#xff0c;会影响后续判断&#xff0c;题目又要求原地算法&#xff0c;那么进一步考虑是否可以将元素为0&#xff0c;其行列需要设为0的位置给存储下来&#xff0c;最后再遍历根据…
阅读更多...
OCR实践-问卷表格统计

OCR实践-问卷表格统计

前言 书接上文 OCR实践—PaddleOCROCR实践-Table-Transformer 本项目代码已开源 放在 Github上&#xff0c;欢迎参考使用&#xff0c;Star https://github.com/caibucai22/TableAnalysisTool 主要功能说明&#xff1a;对手动拍照的问卷图片进行统计分数&#xff08;对应分数…
阅读更多...
yarn list --pattern vuex-module-decorators

yarn list --pattern vuex-module-decorators

dgqdgqdeMac-mini spid-admin % yarn list --pattern vuex-module-decorators yarn list v1.22.22 └─ vuex-module-decorators0.16.1 ✨ Done in 0.24s.好的&#xff0c;这段代码是一个典型的 Vuex 模块定义&#xff0c;使用了 vuex-module-decorators 库。这个库为 Vuex 提…
阅读更多...
用Python写炸金花游戏

用Python写炸金花游戏

文章目录 **代码分解与讲解**1. **扑克牌的生成与洗牌**2. **给玩家发牌**3. **打印玩家的手牌**4. **定义牌的优先级**5. **判断牌型**6. **确定牌型优先级**7. **比较两手牌的大小**8. **打印结果** 完整代码 以下游戏规则&#xff1a; 那么我们要实现的功能&#xff0c;就是…
阅读更多...
day19-Linux软件包

day19-Linux软件包

科普&#xff0c;什么是代码文件。 电脑程序Program&#xff0c;就是某一个编程语言编写的一个代码文件&#xff0c;里面包含了该语言特有的指令&#xff0c;以及各种字符、符号。 linux自带的network管理脚本&#xff0c;shell脚本 什么是软件程序。 软件程序&#xff0c;就…
阅读更多...
图像处理-Ch4-频率域处理

图像处理-Ch4-频率域处理

Ch4 频率域处理(Image Enhancement in Frequency Domain) FT &#xff1a;将信号表示成各种频率的正弦信号的线性组合。 频谱&#xff1a; ∣ F ( u , v ) ∣ [ R 2 ( u , v ) I 2 ( u , v ) ] 1 2 |F(u, v)| \left[ R^2(u, v) I^2(u, v) \right]^{\frac{1}{2}} ∣F(u,v)…
阅读更多...
Vue BPMN Modeler流程图

Vue BPMN Modeler流程图

1、参考地址 git clone https://github.com/evanyangg/vue-bpmn-modeler.git 2、安装bpmn.js npm install bpmn-js --save 3、使用bpmn.js <template><div class"containers"><div class"canvas" ref"canvas"></div&g…
阅读更多...
STM32完全学习——FATFS0.15移植SD卡

STM32完全学习——FATFS0.15移植SD卡

一、下载FATFS源码 大家都知道使用CubMAX可以很快的将&#xff0c;FATFS文件管理系统移植到单片机上&#xff0c;但是别的芯片没有这么好用的工具&#xff0c;就需要自己从官网下载源码进行移植。我们首先解决SD卡的驱动问题&#xff0c;然后再移植FATFS文件管理系统。 二、SD…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023