web-dev-qa-db-fra.com

Comment ajouter une demande CORS dans l'en-tête dans Angular 5

J'ai ajouté le CORS dans l'en-tête, mais le problème CORS persiste dans ma demande. Quelle est la bonne façon d’ajouter et de gérer la CORS et d’autres demandes dans les en-têtes?

Voici le code du fichier de service:

import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
  headers: new HttpHeaders({ 
    'Access-Control-Allow-Origin':'*',
    'Authorization':'authkey',
    'userid':'1'
  })
};

public baseurl = 'http://localhost/XXXXXX';

userAPI(data): Observable<any> {
  return this.http.post(this.baseurl, data, httpOptions)
    .pipe(
      tap((result) => console.log('result-->',result)),
      catchError(this.handleError('error', []))
    );
}

Erreur:

La réponse à la demande de contrôle en amont ne réussit pas la vérification du contrôle d'accès: aucun en-tête 'Access-Control-Allow-Origin' n'est présent sur la ressource demandée. Origin ' http: // localhost: 4200 ' n'est donc pas autorisé à accéder

failed: Réponse d'échec Http pour (url inconnue): 0 Erreur inconnue

Dans mon code côté serveur, j'ai ajouté CORS dans le fichier d'index.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
angularangular5
35
Aman Kumar

CORS (Cross-Origin Resource Sharing) est un moyen pour le serveur de dire "j'accepterai votre demande, même si vous veniez d'une origine différente". Cela nécessite la coopération du serveur. Si vous ne pouvez pas modifier le serveur (par exemple, si vous utilisez une API externe), cette approche ne fonctionnera pas.

Modifiez le serveur pour ajouter l'en-tête Access-Control-Allow-Origin: * afin d'activer les demandes d'origine croisée n'importe où (ou spécifiez un domaine à la place de *). 

23
Navoneel Talukdar

D'après mon expérience, les plugins fonctionnaient avec HTTP mais pas avec le dernier httpClient. En outre, la configuration des en-têtes de réponse CORS sur le serveur n'était pas vraiment une option. J'ai donc créé un fichier proxy.conf.json pour agir en tant que serveur proxy. 

En savoir plus à ce sujet ici .

proxy.conf.json fichier:

{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}

J'ai placé le fichier proxy.conf.json juste à côté du fichier package.json dans le même répertoire.

Ensuite, j'ai modifié la commande de démarrage dans le fichier package.json:

"start": "ng serve --proxy-config proxy.conf.json"

L'appel HTTP depuis mon composant d'application:

return this._http.get('/posts/pictures?method=GetPictures')
.subscribe((returnedStuff) => {
  console.log(returnedStuff);
});

Enfin, pour exécuter mon application, je devrais utiliser npm start ou ng serve --proxy-config proxy.conf.json

26
rgantla

Un POST avec httpClient dans Angular 6 faisait également une requête OPTIONS:

En-têtes généraux:

 URL de la demande: https: //hp-probook/Perl-bin/muziek.pl/=/postData
Request Méthode: OPTIONS 
 Code d'état: 200 OK 
 Adresse distante: 127.0.0.1: 443 
 Politique relative aux référents: pas de référent lors du déclassement

Mon serveur Perl REST implémente la demande OPTIONS avec le code de retour 200.

En-tête de la prochaine demande POST:

 Accepter: */* 
 Accept-Encodage: gzip, deflate, br 
 Accepter-Langue: nl-NL, nl; q = 0,8, en-US; q = 0,6, en; q = 0,4 
 Access-Control-Request-Headers: type de contenu 
 Méthode de demande de contrôle d'accès: POST 
 Connexion: keep-alive 
 Hôte: hp-probook 
 Origine: http://localhost:4200
Referer:http://localhost:4200/
User-Agent:Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, comme Gecko) Chrome/59.0.3071.109 Safari/537.36

Notice Access-Control-Request-Headers: type de contenu. 

Ainsi, mon script Perl backend utilise les en-têtes suivants:


 - "Access-Control-Allow-Origin" => '*', 
 - "Access-Control-Allow-Methods" => 'GET, POST, PATCH, DELETE, PUT, OPTIONS', 
 - "Access-Control-Allow-Headers" => 'Origine, Type de contenu, X-Auth-Token, Type de contenu',

Avec cette configuration, GET et POST ont fonctionné pour moi!

2
Rob Lassche

Faites que l'en-tête ressemble à ceci pour HttpClient dans NG5:

let httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'apikey': this.apikey,
        'appkey': this.appkey,
      }),
      params: new HttpParams().set('program_id', this.program_id)
    };

Vous pourrez faire appel api avec votre URL localhost, cela fonctionne pour moi ..

  • N'oubliez jamais votre colonne de paramètres dans l'entête:
2
Damon Wu

veuillez importer requestoptions de cors angulaire

    import {RequestOptions, Request, Headers } from '@angular/http';

et ajouter des options de demande dans votre code comme indiqué ci-dessous

    let requestOptions = new RequestOptions({ headers:null, withCredentials: 
    true });

envoyer une option de demande dans votre demande d'api

extrait de code ci-dessous

     let requestOptions = new RequestOptions({ headers:null, 
     withCredentials: true });
     return this.http.get(this.config.baseUrl + 
     this.config.getDropDownListForProject, requestOptions)
     .map(res => 
     {
      if(res != null)
      { 
        return res.json();
        //return true;
      }
    })
  .catch(this.handleError);
   }

et ajoutez CORS dans votre code backend PHP où toutes les requêtes api arriveront en premier.

essayez ceci et laissez-moi savoir si cela fonctionne ou non, j'ai eu le même problème. J'ajoutais CORS d'angular5 qui ne fonctionnait pas. 

1
raj yadav

Ce qui suit a fonctionné pour moi après des heures d’essai

      $http.post("http://localhost:8080/yourresource", parameter, {headers: 
      {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' } }).

Cependant, le code suivant n'a pas fonctionné, je ne vois pas trop pourquoi, espérons-le, quelqu'un pourra améliorer cette réponse.

          $http({   method: 'POST', url: "http://localhost:8080/yourresource", 
                    parameter, 
                    headers: {'Content-Type': 'application/json', 
                              'Access-Control-Allow-Origin': '*',
                              'Access-Control-Allow-Methods': 'POST'} 
                })
0
MG Developer