Angular调用Spring REST接口出现CORS跨域问题求助

嘿，我来帮你搞定这个跨域报错！你遇到的是典型的CORS（跨域资源共享）预检请求失败问题，虽然你在客户端加了请求头，但核心问题出在服务端的CORS配置上——客户端的请求头设置没法让服务端允许你的跨域请求，得从Spring这边下手调整。

一、先搞定Spring服务端的CORS配置 #

这是解决问题的关键，给你几种靠谱的配置方式：

1. 单个接口/控制器加@CrossOrigin注解 #

如果只是想让/rest/emp/dummy这个接口允许跨域，直接在对应的Controller或者方法上加注解就行：

@RestController
@RequestMapping("/rest/emp")
// 允许Angular的源访问，同时放开所有请求头
@CrossOrigin(origins = "http://localhost:4200", allowedHeaders = "*")
public class EmployeeController {

    @GetMapping("/dummy")
    public Employee getDummyEmployee() {
        // 这里写你的业务逻辑
        return new Employee();
    }
}

这里的origins指定了允许跨域的源（就是你的Angular项目地址），allowedHeaders确保预检请求里的头都能被服务端接受。

2. 全局CORS配置（推荐，适合多接口场景） #

如果你的Spring应用有很多接口需要跨域，全局配置更省心，创建一个配置类：

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();
        CorsConfiguration config = new CorsConfiguration();
        
        // 允许你的Angular地址跨域
        config.addAllowedOrigin("http://localhost:4200");
        // 放开所有HTTP请求方法（GET、POST、PUT等）
        config.addAllowedMethod("*");
        // 允许所有请求头
        config.addAllowedHeader("*");
        // 如果你的接口需要携带cookie，把这个打开
        config.setAllowCredentials(true);
        
        // 对所有接口路径生效
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

记得把这个配置类放在Spring主启动类的同包或者子包下，确保能被Spring扫描到。

3. 避免配置冲突 #

如果你用的是Spring Boot 2.x及以上版本，别同时混用注解和全局配置，容易出冲突。另外，检查下你的接口路由是不是正确，先拿Postman直接调用http://127.0.0.1:8080/SpringRestExample/rest/emp/dummy，确保接口本身能正常返回数据，排除接口本身的问题。

二、客户端Angular的请求头注意点 #

你提到已经加了请求头，这里要提醒你：客户端不需要手动添加Access-Control-Allow-Origin头！ 这个是服务端返回的响应头，不是客户端发送的请求头，很多人会在这里搞错。正确的Angular请求代码应该是这样的：

import { HttpClient, HttpHeaders } from '@angular/common/http';

// 组件里的代码
constructor(private http: HttpClient) {}

fetchDummyEmployee() {
  const headers = new HttpHeaders({
    'Content-Type': 'application/json'
    // 如果需要其他自定义头，这里加，但要确保服务端配置里允许这些头
  });
  return this.http.get('http://127.0.0.1:8080/SpringRestExample/rest/emp/dummy', { headers });
}

三、验证配置是否生效 #

配置完后，打开浏览器开发者工具（F12），切换到Network标签，重新发起请求，找到OPTIONS类型的预检请求，查看它的Response Headers里有没有Access-Control-Allow-Origin: http://localhost:4200。如果有，说明配置生效了；如果没有，再回头检查服务端的配置是否正确。

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