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

Question

J'ai ajouté de la SCRO en en-tête mais je suis encore en train de la SCRO problème dans ma requête. Quelle est la bonne façon d'ajouter et de gérer les catégories de documents et autres demandes dans les en-têtes?

Ici, c'est le service de fichier de code:

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:

Réponse à la demande de contrôle en amont ne passent pas de contrôle d'accès: Pas de "Access-Control-Allow-Origin' en-tête est présent sur la ressource demandée. Origine 'http://localhost:4200' est donc pas autorisé à accéder

a échoué: Http réponse en cas d'échec de (inconnu url): 0 Erreur Inconnue

Dans mon code côté serveur, j'ai ajouté de la SCRO 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');

Answer 1

Dans mon expérience, les plugins travaillé avec HTTP, mais pas avec la dernière httpClient. Aussi, la configuration de la SCRO en-têtes de réponse sur le serveur n'était pas vraiment une option. Donc, j'ai créé un proxy.conf.json le fichier d'agir comme un serveur proxy.

Lire plus à ce sujet ici.

proxy.conf.json le fichier:

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

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

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

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

Le HTTP appeler à partir de mon application composant:

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

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

Answer 2

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. Par conséquent, 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: * pour permettre les demandes d'origine croisée de n'importe où (ou spécifiez un domaine à la place de *).

Answer 3

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'en-tête: tels que paramètres: new HttpParams (). Set ('id_programme', this.program_id)

Answer 4

Un POST avec httpClient Angulaire 6 était également faire une demande OPTIONS:

Les En-Têtes Général:

Demande d'URL:https://hp-probook/perl-bin/muziek.pl/=/postData
La Méthode de requête:OPTIONS
Code d'état:200 OK
Adresse Distante:127.0.0.1:443
Référent de la Politique:non-référent-quand-downgrade

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

Le prochain POST-Tête de la requête:

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4
Contrôle d'accès-Request-Headers:content-type
Contrôle d'accès-Demande-Méthode:POST
Connection: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, like Gecko) Chrome/59.0.3071.109 Safari/537.36

Avis de Contrôle d'Accès-Request-Headers:content-type.

Donc, mon backend script perl utilise les en-têtes suivants:

 -"Access-Control-Allow-Origin" => '*',
 -"Access-Control-Allow-Méthodes" = > "GET,POST,CORRIGER,SUPPRIMER,METTRE,OPTIONS',
 -"Access-Control-Allow-les en-Têtes" => 'Origine, Content-Type, X-Auth-Jeton, content-type',

Avec ce paramétrage, le GET et POST fonctionné pour moi!

Answer 5

veuillez importer requestoptions angulaires de la scro

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

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

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

envoyez une demande d'option dans votre demande d'api

l'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 ajouter de la SCRO dans votre backend PHP code où toutes les api de demande de terre en premier.

essayez ceci et laissez-moi savoir si cela fonctionne ou pas, j'ai eu un problème identique, j'ai été l'ajout de la SCRO de angular5 qui ne fonctionnait pas alors j'ai ajouté de la SCRO à l'arrière-plan et il a travaillé pour moi