Spring Boot跨域资源共享问题完整解决方案

一、错误提示：

Access to XMLHttpRequest at 'http://localhost:8088/api/login' from origin 'http://localhost:5173' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

二、问题分析与解决

2.1 问题现象

当前端应用(http://localhost:5173) 访问后端 API(http://localhost:8088/api)时，浏览器控制台报错：

Access to XMLHttpRequest at 'http://localhost:8088/api/login' from origin 'http://localhost:5173' 
has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

2.2 问题分析

• 根本原因：浏览器的同源策略(Same-Origin Policy)阻止了跨域请求
• 端口差异：前端(5173)与后端(8088)使用不同端口，被判定为不同源
• 预检请求失败：复杂请求会先发送OPTIONS预检请求，后端未正确处理
• 缺少响应头：响应中未包含 Access-Control-Allow-Origin 等必要CORS头信息

2.3 解决方案

解决方案是在 Spring Boot 后端添加全局配置：创建配置类 webconfig.java

package com.example.springboot.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;

/**
 * Web配置类
 * 用于配置跨域资源共享(CORS)等Web相关设置
 */
@Configuration
public class WebConfig {

    /**
     * 配置跨域资源共享
     * 允许前端应用访问后端API
     * 
     * @return CorsFilter
     */
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 允许所有域名进行跨域调用
        config.addAllowedOriginPattern("*");
        // 允许跨越发送cookie
        config.setAllowCredentials(true);
        // 放行全部原始头信息
        config.addAllowedHeader("*");
        // 允许所有请求方法跨域调用
        config.addAllowedMethod("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

---

转载吱一声