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

news2024/12/28 21:26:30

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，默认false
        logLevel: '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 {

    @GetMapping
    public 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 {

    @Override
    public 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 {

    @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);
    }
}

多路径配置示例

如果你有多个路径需要不同的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.coloradmin.cn/o/2267112.html

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

相关文章

Docker 部署 plumelog 最新版本 实现日志采集

Docker 部署 plumelog 最新版本 实现日志采集

1.配置plumelog.yml version: 3 services:plumelog:#此镜像是基于plumelog-3.5.3版本image: registry.cn-hangzhou.aliyuncs.com/k8s-xiyan/plumelog:3.5.3container_name: plumelogports:- "8891:8891"environment:plumelog.model: redisplumelog.queue.redis.redi…
阅读更多...
Empire Lupin One靶机

Empire Lupin One靶机

靶机 ip&#xff1a;192.168.152.157 我们访问页面 第一步信息收集 我们先扫描一下端口 扫描到开启了 22 端口 80 端口 我们使用御剑扫描一下网站的后台 我们挨个访问一下 发现 apache 的帮助页面&#xff0c;暂时记录&#xff0c;看看等会有没有需要 我们查看到 robots.tx…
阅读更多...
WPF 绘制过顶点的圆滑曲线（样条，贝塞尔）

WPF 绘制过顶点的圆滑曲线（样条，贝塞尔）

项目中要用到样条曲线&#xff0c;必须过顶点&#xff0c;圆滑后还不能太走样&#xff0c;捣鼓一番&#xff0c;发现里面颇有玄机&#xff0c;于是把我多方抄来改造的方法发出来&#xff0c;方便新手&#xff1a; 如上图&#xff0c;看代码吧&#xff1a; -------------------…
阅读更多...
绝美的数据处理图-三坐标轴-散点图-堆叠图-数据可视化图

绝美的数据处理图-三坐标轴-散点图-堆叠图-数据可视化图

clc clear close all %% 读取数据 load(MyColor.mat) %读取颜色包for iloop 1:25 %提取工作表数据data0(iloop) {readtable(data.xlsx,sheet,iloop)}; end%% 解析数据 countzeros(23,14); for iloop 1:25index(iloop) { cell2mat(table2array(data0{1,iloop}(1,1)))};data(i…
阅读更多...
hdfs命令（三）- hdfs 管理命令（三）- hdfs dfsadmin命令

hdfs命令（三）- hdfs 管理命令（三）- hdfs dfsadmin命令

文章目录 前言一、hdfs分布式文件系统管理命令1. 介绍2. 语法及解释3. 命令3.1 生成HDFS集群的状态报告3.1.1 语法及解释3.1.2 示例 3.2 重新加载配置文件并更新NameNode中的节点列表3.3 刷新指定DataNode上的NameNode信息3.3.1 语法 3.4 获取并显示指定DataNode的信息3.4.1 语…
阅读更多...
Word论文交叉引用一键上标

Word论文交叉引用一键上标

Word论文交叉引用一键上标 1.进入Microsoft word使用CtrlH快捷键或单击替换按钮 2.在查找内容中输入[^#] 3.鼠标点击&#xff0c;标签为“替换为&#xff1a;”的文本框&#xff0c;注意光标一定要打在图红色方框圈中的文本框中&#xff01; 4.点击格式选择字体 5.勾选上标…
阅读更多...
JAVA：最简单多线程方法调用

JAVA：最简单多线程方法调用

以下介绍在JAVA中&#xff0c;最简单调用多线程的方法。 在需要使用多线程方法的类中&#xff0c;新增线程类Thread并实现方法run。 //定义多线程class ThreadLinePoints extends Thread{private String m;public ThreadLinePoints(){}public ThreadLinePoints(String m){this…
阅读更多...
Hadoop中MapReduce过程中Shuffle过程实现自定义排序

Hadoop中MapReduce过程中Shuffle过程实现自定义排序

文章目录 Hadoop中MapReduce过程中Shuffle过程实现自定义排序一、引言二、实现WritableComparable接口1、自定义Key类 三、使用Job.setSortComparatorClass方法2、设置自定义排序器3、自定义排序器类 四、使用示例五、总结 Hadoop中MapReduce过程中Shuffle过程实现自定义排序 一…
阅读更多...
科技云报到：人工智能时代“三大件”：生成式AI、数据、云服务

科技云报到：人工智能时代“三大件”：生成式AI、数据、云服务

科技云报到原创。 就像自行车、手表和缝纫机是工业时代的“三大件”。生成式AI、数据、云服务正在成为智能时代的“新三大件”。加之全球人工智能新基建加速建设&#xff0c;成为了人类社会数字化迁徙的助推剂&#xff0c;让新三大件之间的耦合越来越紧密。从物理世界到数字世…
阅读更多...
Windows 11 中部署 Linux 项目

Windows 11 中部署 Linux 项目

一、总体思路 在 Windows 11 中部署 Linux 项目&#xff0c;主要是借助 Windows Subsystem for Linux&#xff08;WSL&#xff09;来实现。在WSL中新建基于Linux的项目虚拟环境&#xff0c;以供WIN下已克隆的项目使用。WSL 允许在 Windows 系统上运行原生的 Linux 二进制可执行…
阅读更多...
【ETCD】【实操篇（十五）】etcd集群成员管理：如何高效地添加、删除与更新节点

【ETCD】【实操篇（十五）】etcd集群成员管理：如何高效地添加、删除与更新节点

etcd 是一个高可用的分布式键值存储&#xff0c;广泛应用于存储服务发现、配置管理等场景。为了确保集群的稳定性和可扩展性&#xff0c;管理成员节点的添加、删除和更新变得尤为重要。本文将指导您如何在etcd集群中处理成员管理&#xff0c;帮助您高效地维护集群节点。 目录 …
阅读更多...
数据结构与算法Python版 平衡二叉查找树AVL

数据结构与算法Python版 平衡二叉查找树AVL

文章目录 一、平衡二叉查找树二、AVL树测试三、AVL树-算法分析 一、平衡二叉查找树 平衡二叉查找树-AVL树的定义 AVL树&#xff1a;在key插入时一直保持平衡的二叉查找树。可以利用AVL树实现抽象数据类型映射Map。与二叉查找树相比&#xff0c;AVL树基本上与二叉查找树的实现…
阅读更多...
【Redis】Redis 安装与启动

【Redis】Redis 安装与启动

在实际工作中&#xff0c;大多数企业选择基于 Linux 服务器来部署项目。本文演示如何使用 MobaXterm 远程连接工具&#xff0c;在 CentOS 7 上安装和启动 Redis 服务&#xff08;三种启动方式&#xff0c;包括默认启动、指定配置启动和开机自启&#xff09;。在安装之前&#x…
阅读更多...
通过Js动态控制Bootstrap模态框-弹窗效果

通过Js动态控制Bootstrap模态框-弹窗效果

目的&#xff1a;实现弹出窗、仅关闭弹窗之后才能操作&#xff08;按ESC可退出&#xff09;。自适应宽度与高度、当文本内容太多时、添加滚动条效果。 效果图 源码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">…
阅读更多...
el-table合并单元行后的多选框选中问题

el-table合并单元行后的多选框选中问题

问题描述 合并单元行以后&#xff0c;首列的多选框也会合并&#xff0c;此时选中该多选框其实是只选中了合并单元行的第一行的多选框&#xff0c;其他的都未被选中。 解决方案 原本想着手动去修改表头的半选状态和全选状态 &#xff0c;但是没有找到相关方法&#xff0c;后面觉…
阅读更多...
电脑缺失libcurl.dll怎么解决？详解电脑libcurl.dll文件丢失问题

电脑缺失libcurl.dll怎么解决？详解电脑libcurl.dll文件丢失问题

一、libcurl.dll文件丢失的原因 libcurl.dll是一个用于处理URL传输的库文件&#xff0c;广泛应用于各种基于网络的应用程序。当这个文件丢失时&#xff0c;可能会导致相关应用程序无法正常运行。以下是libcurl.dll文件丢失的一些常见原因&#xff1a; 软件安装或卸载不完整&a…
阅读更多...
图文教程：使用PowerDesigner导出数据库表结构为Word/Html文档

图文教程：使用PowerDesigner导出数据库表结构为Word/Html文档

1、第一种情况-无数据库表&#xff0c;但有数据模型 1.1 使用PowerDesigner已完成数据建模 您已经使用PowerDesigner完成数据库建模&#xff0c;如下图&#xff1a; 1.2 Report配置和导出 1、点击&#xff1a;Report->Reports&#xff0c;如下图&#xff1a; 2、点击&…
阅读更多...
UE--如何用 Python 调用 C++ 及蓝图函数

UE--如何用 Python 调用 C++ 及蓝图函数

前言 先讲下如何用 Python 调用 C 函数吧。 详细可见我的上篇文章 最关键的一点就是得在函数上加一个宏&#xff1a;UFUNCTION(BlueprintCallable) UFUNCTION(BlueprintCallable) static bool GetOrCreatePackage(const FString& PackagePath, UPackage*& OutPackag…
阅读更多...
小程序租赁系统开发的优势与实践探索

小程序租赁系统开发的优势与实践探索

内容概要 小程序租赁系统开发正在引起广泛关注&#xff0c;特别是在数字化快速发展的今天。很多企业开始意识到&#xff0c;小程序不仅能为他们带来更多的客户&#xff0c;还能极大地提高管理效率。借助小程序&#xff0c;用户在租赁时可以更加方便地浏览和选择产品&#xff0…
阅读更多...
闲谭Scala(3)--使用IDEA开发Scala

闲谭Scala(3)--使用IDEA开发Scala

1. 背景 广阔天地、大有作为的青年&#xff0c;怎么可能仅仅满足于命令行。 高端大气集成开发环境IDEA必须顶上&#xff0c;提高学习、工作效率。 开整。 2. 步骤 2.1 创建工程 打开IDEA&#xff0c;依次File-New-Project…&#xff0c;不好意思我的是中文版&#xff1a;…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023