解决前后端交互中出现的跨域问题（基于Springboot和Vue3）

MX_9359

于 2025-07-19 08:22:38 发布

阅读量310

点赞数 11

CC 4.0 BY-SA版权

文章标签：交互 spring boot 后端

本文链接：https://blog.csdn.net/2301_80749359/article/details/149459358

解决前后端交互中出现的跨域问题（基于Springboot和Vue3）

一、问题描述

二、问题解决

在 Spring Boot 项目的 Java 代码中，创建一个配置类来处理 CORS。例如，在config包下创建CorsConfig.java文件，内容如下：

2.1允许所有地址访问的情形

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() {
        CorsConfiguration config = new CorsConfiguration();
        // 允许所有来源，生产环境建议指定前端具体域名，如 config.addAllowedOrigin("http://localhost:8089");
        config.addAllowedOrigin("*"); 
        config.addAllowedMethod("*"); // 允许所有HTTP方法，如GET、POST、PUT、DELETE等
        config.addAllowedHeader("*"); // 允许所有请求头
        config.setAllowCredentials(true); // 允许携带凭证，如cookie

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config); // 对所有接口生效，也可指定特定路径，如"/api/**"

        return new CorsFilter(source);
    }
}

2.2允许指定地址访问的情形

package com.hechixueyuan.Student_Mannage_System_h.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 CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:8089") // 允许的前端地址
//                .allowedOrigins("*") // 允许的前端地址
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("*")
                .allowCredentials(true)
                .maxAge(3600); // 预检请求缓存时间
    }
}