Comment ajouter de la SCRO demande dans l'en-tête Angulaire 5

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 est au service du 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 (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');

Besoin d'ajouter de la Scro en-têtes sur le côté serveur.
Oui, j'ai ajouté dans mon fichier d'index.
post que serveur de fichier

OriginalL'auteur Aman Kumar | 2017-11-17

angular angular5

24

CORS (Cross-Origin Resource sharing) est un moyen pour le serveur de dire "je vais accepter votre demande, même si vous venez d'une autre origine." Cela nécessite une coopération depuis le serveur, donc si vous ne pouvez pas modifier le serveur (par exemple, si vous utilisez une API externe), cette approche ne fonctionnera pas.

Modifier le serveur pour ajouter l'en-tête Access-Control-Allow-Origin: * pour autoriser les requêtes d'origine de n'importe où (ou spécifier un domaine à la place de *).

Je pense que le navigateur(pas de serveur) de rejeter la demande si elle n'a pas vu que l'en-tête. corrigez-moi si je me trompe

OriginalL'auteur Navoneel Talukdar
27

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 fichier à agir comme un serveur proxy.

En savoir plus sur ce ici.

proxy.conf.json fichier:
```
{
  "/posts": {
    "target": "https://example.com",
    "secure": true,
    "pathRewrite": {
    "^/posts": ""
  },
    "changeOrigin": true
  }
}
```
J'ai placé le proxy.conf.json fichier juste à côté de la la package.json 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"
```
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

j'ai essayé ceci mais ça ne fonctionne pas dans mon système
Ce travail sera Angulaire Universelle
Il fonctionne à des fins de développement. Vous ne pouvez pas construire votre application avec cet outil de proxy
Quelqu'un pourrait ici s'il vous plaît jetez un oeil à la question stackoverflow.com/questions/55429787/...

OriginalL'auteur rgantla
2

L'en-tête ressemble à ceci pour HttpClient dans CG5:
```
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 serez en mesure de faire appel de l'api avec votre url localhost, ça fonctionne pour moi
..
- N'oubliez jamais votre params columnd dans l'en-tête:
  comme params: nouvelle HttpParams().set('program_id', cette.program_id)
OriginalL'auteur Damon Wu

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

En-Têtes Général:

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 en-Tête de 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!

OriginalL'auteur Rob Lassche

1

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 });
```
envoyer la requête 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 ajouter de la SCRO dans votre backend PHP code où toutes les api de demande de terre en premier.

essayer cela 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

OriginalL'auteur raj yadav

La suite travaillé pour moi, après des heures à essayer

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

Toutefois code suivant ne fonctionne pas, je ne sais pas pourquoi, j'espère que quelqu'un peut 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'} 
                })

OriginalL'auteur MG Developer

-4

angulaire 2+ surtout de créer un tel problème lors de la réponse à venir à partir du serveur de l'API n'est pas valide JSON. Signifie, serveur d'impression type de réponse de la page web au lieu de retourner réponse JSON.

Réponse du serveur non valide
```
print $response;
```
bonne réponse
```
return $response;
```
Note: j'ai été confronté problème angulaire de l'application. Développeur d'impression de retourner la réponse.

OriginalL'auteur Hafiz Shehbaz Ali

Vous devez vous connecter pour publier un commentaire.