React前端向Spring Boot后端发起Axios请求遇OAuth2跨域问题求助

你的问题核心是OAuth2拦截器优先级高于CORS过滤器，导致浏览器发送的预检OPTIONS请求被OAuth2拦截返回401，进而触发跨域错误。你之前在前端请求里加Access-Control-Allow-Origin是完全错误的——这个响应头是后端返回给浏览器的，前端请求里加它毫无作用。

下面是具体解决步骤：

1. 调整Spring Boot的CORS过滤器优先级 #

创建专门的CORS配置类，让它在所有过滤器（包括OAuth2的拦截器）之前执行：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.Ordered;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsConfig {
    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration config = new CorsConfiguration();
        // 允许前端域名跨域
        config.addAllowedOrigin("http://localhost:3000");
        // 允许携带Authorization头（OAuth2令牌需要）
        config.addAllowedHeader("*");
        // 允许所有请求方法
        config.addAllowedMethod("*");
        // 允许携带凭证（如果需要的话）
        config.setAllowCredentials(true);
        // 预检请求缓存时间，减少OPTIONS请求次数
        config.setMaxAge(3600L);

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        // 对所有接口生效
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

2. 确保OAuth2放行OPTIONS请求 #

如果用的是Spring Security OAuth2，需要在Security配置里明确放行OPTIONS请求，不需要认证：

import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.http.HttpMethod;

public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
            .cors() // 启用CORS配置
            .and()
            .authorizeRequests()
            // 放行所有OPTIONS请求
            .antMatchers(HttpMethod.OPTIONS, "/**").permitAll()
            // 其他接口需要认证
            .anyRequest().authenticated()
            .and()
            .oauth2ResourceServer().jwt(); // 假设用的是JWT模式
    }
}

3. 修正Axios请求的头设置 #

前端Axios只需要携带Authorization头（令牌），不需要加Access-Control-Allow-Origin：

import axios from 'axios';

const fetchFarmData = async () => {
    try {
        const token = localStorage.getItem('oauth_token'); // 假设令牌存在localStorage里
        const response = await axios.get('http://localhost:8080/farm', {
            headers: {
                'Authorization': `Bearer ${token}` // 正确携带OAuth2令牌
            }
        });
        console.log(response.data);
    } catch (error) {
        console.error('请求失败:', error);
    }
};

额外检查点 #

• 确认后端验证令牌的逻辑正常，确保令牌有效时能正确返回数据
• 清除浏览器缓存，避免之前的错误响应影响测试
• 检查浏览器控制台的Network面板，看OPTIONS请求的响应状态码，如果是200就说明CORS配置生效了

内容的提问来源于stack exchange，提问作者hardy6413