Angular发送的POST请求被提交为OPTIONS请求到SpringBoot后台。
这个问题通常是因为服务器在接收到跨域的POST请求时，发回了一个OPTIONS响应，这就是所谓的“预检请求”，用于告诉浏览器后续请求是否允许跨域。
解决这个问题的方法是，在后端代码中添加一个过滤器，让服务器在接收到OPTIONS请求时，返回一个允许跨域的响应头。
以Java为例，可以在Spring Boot的后端代码中添加如下过滤器：
@Configuration public class CorsFilterConfiguration {
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
在Angular的前端代码中，使用HttpClient的post方法时，需要设置请求头选项，以便告诉浏览器这是一个跨域请求。例如：
import { Component } from '@angular/core'; import { HttpClient, HttpHeaders } from '@angular/common/http';
@Component({
selector: 'app-root',
template: 响应结果：{{response}}
})
export class AppComponent {
response: any;
constructor(private http: HttpClient) {}
sendPostRequest() { const url = 'http://example.com/api/post'; const body = { name: 'Alice', age: 18 }; const options = { headers: new HttpHeaders({ 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }) };