Angular向Spring Boot API发送POST请求失败，求解决方案

你遇到的是**跨域资源共享(CORS)**问题——浏览器的同源策略会阻止前端页面向不同域名/端口的后端API发送请求，哪怕后端没配置安全机制也会触发这个限制。你在请求头里加Access-Control-Allow-Origin是无效的，这个响应头是后端返回给浏览器的，不是前端请求时需要携带的。

解决方案 #

方案一：在Spring Boot后端配置CORS #

这是最直接的解决方式，让后端明确允许前端的跨域请求：

全局CORS配置（推荐）

创建一个配置类，对所有接口生效：

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();
        
        // 开发环境允许所有来源，生产环境建议指定具体前端域名
        config.addAllowedOrigin("*");
        // 允许所有HTTP请求方法（GET/POST等）
        config.addAllowedMethod("*");
        // 允许所有请求头
        config.addAllowedHeader("*");
        
        source.registerCorsConfiguration("/**", config);
        return new CorsFilter(source);
    }
}

局部接口配置

如果只想让特定接口允许跨域，在对应的Controller或方法上添加@CrossOrigin注解：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;

@RestController
@CrossOrigin(origins = "*") // 允许所有来源访问该Controller下的接口
public class UserController {
    @PostMapping("/users")
    public User createUser(@RequestBody User user) {
        // 你的业务逻辑
        return user;
    }
}

方案二：Angular开发环境代理配置 #

适合本地开发时使用，通过代理转发请求绕过浏览器的跨域限制：

1. 在Angular项目根目录创建proxy.conf.json文件：

{
    "/users": {
        "target": "http://localhost:8080",
        "secure": false,
        "changeOrigin": true
    }
}

2. 修改angular.json中的serve配置，添加代理文件路径：

"serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
        "browserTarget": "你的项目名称:build",
        "proxyConfig": "proxy.conf.json"
    }
}

3. 修改前端请求URL为相对路径：

const url = '/users'; // 不再写完整的http://localhost:8080/users

4. 重启Angular开发服务器，请求会自动通过代理转发到后端。

前端代码修正 #

去掉请求头里多余的Access-Control-Allow-Origin，HttpClient会自动为JSON请求设置Content-Type：

signUp() {
    const url = 'http://localhost:8080/users'; // 用代理的话改成'/users'
    const data = {
        name: this.name,
        surname: this.surname,
        username: this.username,
        password: this.password
    };

    this.http.post(url, data).subscribe(
        (response) => {
            console.log(response);
        },
        (error) => {
            console.error(error);
        }
    );
}

补充说明 #

你直接用工具（比如Postman）请求后端正常，是因为这类工具不受浏览器同源策略的限制，只有浏览器会强制执行这个规则。

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