Angular - JSON Put and Delete Returns 403 (But postman app works well)

Question

I have an rest api which i could use post and get requests. But when i want to use put and delete request it returns error 403. But also when i try to put and delete with Postman app (an app for json requests) all is works well. Im really confused. Let me prove the problem with some screenshots. (Im censored links for security, sorry for that)

Chrome console; Postman App;

Any my put code;

  /** PUT: update the firm on the server */
updateFirm (firm: Firm): Observable<any> {
 console.log(firm);

 return this.http.put(this.firmUrl+"put/"+String(firm.id), firm, httpOptions).pipe(
   tap(_ => console.log(`updated firm id=${firm.id}`)),
   catchError(this.handleError<any>('updateFirm'))
 );
}

I will be very appreciated if you could help me. Have nice day

What language do you use for your backend? – veben Jan 14 '19 at 23:01 — veben, Jan 14 '19 at 23:01

Rob Lassche · Answer 1 · 2019-01-14T22:49:57.037

2

I had a similar situation and found out that Angular 2 performs a OPTIONS method before a POST is done! OPTIONS was missing in "Access-Control-Allow-Methods".

If I check your log, then I think that you should also allow OPTIONS: With angular, and perl as a backend, I had to allow the following:

-"Access-Control-Allow-Methods" => 'GET,POST,PATCH,DELETE,PUT,OPTIONS',

edited Jan 14 '19 at 22:49

answered Jan 14 '19 at 22:42

Rob Lassche

841
10
16

score 2 · Answer 2 · answered Feb 24 '19 at 01:56

Proxy solves your problem. A nice and fast solution could be to borrow one (like https://cors-anywhere.herokuapp.com) to test then do your own. Here is an example :

import { Component, OnInit } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

@Component({
  selector: 'app-analyzer',
  templateUrl: './analyzer.component.html',
  styleUrls: ['./analyzer.component.scss']
})
export class AnalyzerComponent implements OnInit {

  res;

  constructor(private http: HttpClient) {
    this.getDeck().subscribe(res => {console.log(res); this.res = res; });
  }

  ngOnInit() {
  }

  getDeck() {
    const headers = new HttpHeaders({
      'X-Requested-With': 'XMLHttpRequest'
    });
    return this.http.get('https://cors-anywhere.herokuapp.com/https://www.keyforgegame.com/api/decks/30763530-041c-4e15-b506-3456e79141d2/',
      {headers: headers}
      );
  }

}

score 1 · Accepted Answer · answered Jan 13 '19 at 10:57

1

It looks like a CORS error, you are doing the http request from your local machine on localhost to the backend on a different URL. The only way to solve this would be to allow requests from different origins on the backend. Or possibly to run the backend on your local machine.

answered Jan 13 '19 at 10:57

End

591
3
10

but i able to put and delete from postman app. its also on different machine with server. – Cem Kocagöz Jan 13 '19 at 11:06
1

postman does it's own magic. Check this https://stackoverflow.com/questions/36250615/cors-with-postman – Michael Kornelakis Jan 13 '19 at 11:11
i have asked my manager to check if cors is activated for put and delete. im waiting for his response now. thank you for your attention. i will accept that as answer if cors is the problem. – Cem Kocagöz Jan 13 '19 at 14:35
Thanks Cem, did you manage to find out if CORS was the issue? – End Jan 14 '19 at 08:30
yes, yesterday my manager figured out he is enabled cors just for post and get. – Cem Kocagöz Jan 16 '19 at 15:08

score 1 · Answer 4 · answered Jan 14 '19 at 23:01

Your problem is about CORS for HTTP OPTIONS request.

Indeed, before the execution of the HTTP PUT request, your client has to make a OPTIONS request, in order to add your httpOptions variable, which contains your header.

So you have to authorize the execution of OPTIONS request in the code of your server.

Angular - JSON Put and Delete Returns 403 (But postman app works well)

4 Answers4

Linked