5
votes

Angular - JSON Put and Delete renvoie 403 (mais l'application Postman fonctionne bien)

J'ai une API de repos que je pourrais utiliser post et recevoir des requêtes. Mais quand je veux utiliser la demande de mise et de suppression, cela renvoie l'erreur 403. Mais aussi quand j'essaye de mettre et de supprimer avec l'application Postman (une application pour les demandes json), tout fonctionne bien. Je suis vraiment confus. Laissez-moi vous prouver le problème avec quelques captures d'écran. (Je suis censuré des liens pour la sécurité, désolé pour ça)

Console Chrome; Postman App;

Tout mon code put;

  /** 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'))
 );
}

Je serai très apprécié si vous pouviez m'aider. Bonne journée

typescript angular json

1 commentaires

Quelle langue utilisez-vous pour votre backend?

4 Réponses :

1
votes

Cela ressemble à une erreur CORS, vous faites la requête http de votre machine locale sur localhost vers le backend sur une URL différente. La seule façon de résoudre ce problème serait d'autoriser les demandes d'origines différentes sur le backend. Ou peut-être pour exécuter le backend sur votre machine locale.

5 commentaires

mais je suis capable de mettre et de supprimer de l'application Postman. c'est aussi sur une machine différente avec serveur.

le facteur fait sa propre magie. Vérifiez ce stackoverflow.com/questions/36250615/cors-with-postman

J'ai demandé à mon responsable de vérifier si les cors sont activés pour la mise et la suppression. Im attendant sa réponse maintenant. Merci pour votre attention. J'accepterai cela comme réponse si cors est le problème.

Merci Cem, avez-vous réussi à savoir si CORS était le problème?

oui, hier, mon manager a découvert qu'il était activé cors juste pour poster et obtenir.

2
votes

J'ai eu une situation similaire et j'ai découvert qu'Angular 2 exécute une méthode OPTIONS avant qu'un POST ne soit fait! OPTIONS manquait dans "Access-Control-Allow-Methods".

Si je vérifie votre journal, je pense que vous devriez également autoriser OPTIONS: Avec angular et perl comme backend, j'ai dû autoriser ce qui suit:

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

0 commentaires

1
votes

Votre problème concerne CORS pour la requête OPTIONS HTTP .

En effet, avant l'exécution de la requête HTTP PUT , votre client doit effectuer une requête OPTIONS , afin d'ajouter vos httpOptions variable, qui contient votre en-tête.

Vous devez donc autoriser l'exécution de la requête OPTIONS dans le code de votre serveur .

0 commentaires

2
votes

Proxy résout votre problème. Une solution agréable et rapide pourrait être d'en emprunter une (comme https://cors-anywhere.herokuapp.com a >) pour tester puis faites le vôtre. Voici un exemple:

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}
      );
  }

}

0 commentaires