CODEWITHSUNDEEP
angularspringspring-boot
hamza mon
hamza mon

Reputation: 97

angular : Did not find method in CORS header ‘Access-Control-Allow-Methods

i'm using spring boot in my back end with angular in my front end .. and i'm trying to Delete an item but i doesn't work..when i try to get it works but with Delete it's not working ..

import { Injectable } from '@angular/core';
import { HttpClient,HttpHeaders } from '@angular/common/http';
import { AuthService } from 'app/services/auth.service';


@Injectable({
  providedIn: 'root'
})
export class CollaboratorsService {
url="http://localhost:8080/"

jwt=this.auth.getjwt();

constructor(private http:HttpClient,private auth:AuthService) {  }


  public getCollaborators(name){
    let link="collaboratorses?search="+name;
    return this.auth.getRessource(link);

  }

  public deleteCollaborator(id){
    let fullUrl=this.url+"entreprise/collaborator/"+id;
    console.log("full "+fullUrl);
    let headers = new HttpHeaders({
    'Authorization': this.jwt,
    "Access-Control-Allow-Methods":"GET, POST, DELETE, PUT",
    'Content-Type': 'application/json',
    'Access-Control-Allow-Origin': '*'
     }); 
    return this.http.delete(fullUrl,{headers:headers});
  }
}

onDeleteColl(id){
    let c=confirm("are You Sure you want Delete This Collaborator!");
    if(!c){
        return;
    }else{
        this.collService.deleteCollaborator(id).subscribe(res =>{
      console.log(res);
    },err =>{
        console.log(err);
    });
        this.onGetcoll();
    }
}

every thing work fine when i try to post or get or delete when i use RESTCLIENT extension on firefox but when i try Delete with angular i got this problem

enter image description here

ps: i already added in back end to allow cross so i think the problem is only with angular

protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
            throws ServletException, IOException {

        response.addHeader("Access-Control-Allow-Origin", "*");
        response.addHeader("Access-Control-Allow-Headers","Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Methods, Access-Control-Request-Headers, Authorization");                                                          
        response.addHeader("Access-Control-Expose-Headers", "Access-Control-Allow-Origin, Access-Control-Allow-Credentials, Authorization ");
        response.addHeader("Access-Control-Allow-Methods","Get, Post, Put, Delete, Patch, Options");

Upvotes: 0

Views: 886

Answers (1)

David
David

Reputation: 34455

Remove these headers from angular, as they are server side headers

"Access-Control-Allow-Methods":"GET, POST, DELETE, PUT",
'Access-Control-Allow-Origin': '*'

You can also remove the Content-Type header, as it's set automatically by angular

And server side, try to set the allowed method with uppercase values 

response.addHeader("Access-Control-Allow-Methods","GET, POST, PUT, DELETE, PATCH, OPTIONS");

Upvotes: 2

Related Questions