Esse erro tem a ver com CORS, que é uma política de segurança do protocolo HTTP. Se o servidor não liberar, requisições vindas de outros domínios não serão processadas. Com isso, o servidor tem que permitir.
O erro é esse:
Olha o erro e veja essa parte:
has been blocked by CORS policy
Tu tem que habilitar o CORS no backend (spring).
É diferente. Acessar pelo navegador é diferente de acessar por uma aplicação rodando num servidor http.
Nesse caso cliquei em cima desse link
Tente colocar o @CrossOrigin no método onde o endpoint é declarado, e teste novamente.
Ou poderia ser: a url
export class FuncionarioService {
constructor(private http:HttpClient) { }
url='http://localhost:8080/funcionarios/nomes';
createAtividade(funcionario:Funcionario){
return this.http.post<Funcionario>(this.url,funcionario);
}
Eu sou burro:
Neh não sô. Só tente adicionar o @CrossOrigin no método e tente de novo.
@CrossOrigin
@GetMapping
public List<Atividade> listar() {
System.out.println("chegou aui");
return as.listar();
}
Mas adicione isso no método que retorna os nomes dos funcionários.
Tinha esquecido de colocar em cima do ControlerFuncionario
@CrossOrigin(origins = “http://localhost:4200”, maxAge = 3600)
Agora funcionaou
Obrigado Lucas: só mais um detale: a respeito do delete como defino esse metodo:
removeAtividade(atividadeDelete:Atividade){
return this.http.delete<Atividade>(this.url,atividadeDelete.id);
}
A url parece está correta. Não está funcionando? Dá algum erro?
Essa variavel fica sublinhada com o inform:
o overload matches this call.
Overload 1 of 15, ‘(url: string, options: { headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: “events”; context?: HttpContext | undefined; params?: HttpParams | { …; } | undefined; reportProgress?: boolean | undefined; responseType?: “json” | undefined; withCredentials?: boolean | undefined; }): Observable<…>’, gave the following error.
Argument of type ‘number’ is not assignable to parameter of type ‘{ headers?: HttpHeaders | { [header: string]: string | string[]; } | undefined; observe: “events”; context?: HttpContext | undefined; params?: HttpParams | { …; } | undefined; reportProgress?: boolean | undefined; responseType?: “json” | undefined; withCredentials?: boolean | undefined; }’.
Ah sim, a função delete está sendo chamada do jeito errado. O segundo parâmetro é outra coisa.
Como está a URL do endpoint que realiza o delete?
Assim:
///////////////EXCLUI AS ATIVIDADES////////////////////////////////////
@DeleteMapping("/{atividadeId}")
public ResponseEntity<Void> remover(@PathVariable Long atividadeId) {
if(!as.existsById(atividadeId)) {
return ResponseEntity.notFound().build();
}
as.excluir(atividadeId);
return ResponseEntity.noContent().build();
//return cr.findById(clienteId).map(ResponseEntity::ok).orElse(ResponseEntity.notFound().build());
}
}
Então vc deve chamar mais ou menos assim:
return this.http.delete<Atividade>(this.url + "/" + atividadeDelete.id);
Valeu lucas Obrigado!
Deu certo?