在提交angular springboot表单时出现API问题

Question

输入图片描述

我从angular提交表单后收到了这个消息

这是form.service.ts的代码

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http'
import { Observable } from 'rxjs';
import { Formm } from './formm';
@Injectable({
providedIn: 'root'
})
export class FormmService {
private baseURL = "http://localhost:8080/api/form";
constructor(private httpClient: HttpClient) { }

create(form:Formm): Observable<Object>{
return this.httpClient.post(`${this.baseURL}`, form);
}
getById(id: number): Observable<Formm>{
return this.httpClient.get<Formm>(`${this.baseURL}/${id}`);
}

}

Answer 1

显然，根据例外，您正在从http://localhost:4200加载的内容请求http://localhost:8080中存在的资源，这是现代浏览器默认情况下不允许的，作为其安全策略的一部分。您需要在服务器端做一些更改，以便服务器允许这些请求，并且相同的消息应该以响应头的形式传递给浏览器。

正如您提到的spring一样，您可以通过使用注释@CrossOrigin(origins = "*")(将其添加到控制器或)来启用对跨原点的支持。如果您想为特定的控制器方法添加注释，您可以通过仅向方法添加注释来实现相同的目的。另一种全局添加跨域支持的方法是创建如下

所示的bean

@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**").allowedOrigins("*");
}
};
}

你也可以用特殊的来源来代替"*"，例如:@CrossOrigin(origins = "http://localhost:4200")

更多信息请访问https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS