Angular 和 Spring 通过 API 之间的通信失败的原因是什么?
What is failing in the communication between Angular and Spring through API?
我已经开始使用 Angular 11 和 Spring Boot 创建一个项目,但是我在通过 API
进行通信时遇到了问题。从 Tomcat 服务器开始,它从 port 8080 in the path ''
开始。但是在创建新记录时它显示错误 POST http://localhost:4200/api/client 404 (Not Found)
.
这是我的 controler.java
:
@RequestMapping("/api/client")
public class ClienteController {
@GetMapping({"/", ""})
public List<Cliente> getAll() throws CMException {
return clienteService.findAll();
}
@PostMapping({"/", ""})
public Cliente create(@RequestBody Cliente cliente) throws CMException {
return clienteService.create(cliente);
}
}
这是我的 environment.ts
:
export const environment = {
production: false,
baseUrl: '/api'
};
这是我的 client.service.ts
:
const PREFIX = `${environment.baseUrl}/client`;
@Injectable()
export class ClientService implements IForm<Client> {
constructor(
private http: HttpClient
) {}
public list(filter: any = {}): Observable<Client[]> {
return this.http.get<Client[]>(PREFIX, {params: filter});
}
public create(client: Client): Observable<Client> {
return this.http.post<Client>(PREFIX, client);
}
}
这是我的 component.ts
:
save() {
if (this.formNew.valid) {
if (this.isNew) {
this.clientService.create(this.formNew.value).subscribe(client => {
console.log(`New client: ${cliente.id}`);
this.back();
}, error => {
console.log(`Error client: ${error}`);
});
}
}
}
我已经使用以下参数创建了 proxy.conf.json
文件:
{
"/api/*": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
我的问题:在创建新记录时会出现什么问题,导致后台和前台之间的通信无法进行?我应该添加其他东西吗?我非常坚持这个,因为我看不到问题
export const environment = {
production: false,
baseUrl: 'http://localhost:8080/'
};
在你的环境ts文件中设置基础url
在定义 baseUrl
时,您必须将其定义为您的 API URL,即 http://localhost:8080
,因为您目前在 [=11= 中什么都没有] 因此它被设置为 angular url 你 运行 上。您必须在 environment.ts
中设置它,否则 PREFIX
不会指向您的 API
export const environment = {
production: false,
baseUrl: 'http://localhost:8080'
};
我已经开始使用 Angular 11 和 Spring Boot 创建一个项目,但是我在通过 API
进行通信时遇到了问题。从 Tomcat 服务器开始,它从 port 8080 in the path ''
开始。但是在创建新记录时它显示错误 POST http://localhost:4200/api/client 404 (Not Found)
.
这是我的 controler.java
:
@RequestMapping("/api/client")
public class ClienteController {
@GetMapping({"/", ""})
public List<Cliente> getAll() throws CMException {
return clienteService.findAll();
}
@PostMapping({"/", ""})
public Cliente create(@RequestBody Cliente cliente) throws CMException {
return clienteService.create(cliente);
}
}
这是我的 environment.ts
:
export const environment = {
production: false,
baseUrl: '/api'
};
这是我的 client.service.ts
:
const PREFIX = `${environment.baseUrl}/client`;
@Injectable()
export class ClientService implements IForm<Client> {
constructor(
private http: HttpClient
) {}
public list(filter: any = {}): Observable<Client[]> {
return this.http.get<Client[]>(PREFIX, {params: filter});
}
public create(client: Client): Observable<Client> {
return this.http.post<Client>(PREFIX, client);
}
}
这是我的 component.ts
:
save() {
if (this.formNew.valid) {
if (this.isNew) {
this.clientService.create(this.formNew.value).subscribe(client => {
console.log(`New client: ${cliente.id}`);
this.back();
}, error => {
console.log(`Error client: ${error}`);
});
}
}
}
我已经使用以下参数创建了 proxy.conf.json
文件:
{
"/api/*": {
"target": "http://localhost:8080",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
我的问题:在创建新记录时会出现什么问题,导致后台和前台之间的通信无法进行?我应该添加其他东西吗?我非常坚持这个,因为我看不到问题
export const environment = {
production: false,
baseUrl: 'http://localhost:8080/'
};
在你的环境ts文件中设置基础url
在定义 baseUrl
时,您必须将其定义为您的 API URL,即 http://localhost:8080
,因为您目前在 [=11= 中什么都没有] 因此它被设置为 angular url 你 运行 上。您必须在 environment.ts
中设置它,否则 PREFIX
不会指向您的 API
export const environment = {
production: false,
baseUrl: 'http://localhost:8080'
};