Comment ajouter une requête CORS dans l'en-tête en angle 5
j'ai ajouté les CORS dans l'en-tête mais je reçois toujours la question CORS dans ma demande. Quelle est la bonne façon d'ajouter et de traiter les CORS et autres requêtes dans les en-têtes?
<!-Voici le code de 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:
réponse à la demande pré-affichée ne passe 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. Origine 'http://localhost:4200' est donc pas accès autorisé
échec: réponse Http failure Pour (url inconnue): 0 Erreur inconnue
dans mon code côté serveur, j'ai ajouté des CORS dans le fichier 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');
6 réponses
CORS (Cross-Origin Resource Sharing) est un moyen pour le serveur de dire "j'accepte votre requête, même si vous venez d'une origine différente."Cela nécessite la coopération du 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 activer les requêtes cross-origin à partir de n'importe où (ou spécifier un domaine au lieu de *).
d'après mon expérience, les plugins fonctionnaient avec HTTP mais pas avec le dernier httpClient. De plus, configurer les en-têtes de réponse du CORS sur le serveur n'était pas vraiment une option. Donc, j'ai créé un proxy.conf.json fichier servant de serveur mandataire.
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 l' package.json le fichier dans le même répertoire.
puis j'ai modifié la commande start dans le paquet.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 lancer mon application, je devrais utiliser npm start ou ng serve --proxy-config proxy.conf.json
veuillez importer requestoptions des cors angulaires
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 l'option request dans votre demande 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 des CORS dans votre code PHP d'arrière-plan où toutes les requêtes api se poseront en premier.
essayez ceci et faites-moi savoir si cela fonctionne ou pas j'ai eu un même problème j'ai ajouté des CORS d'angular5 qui ne fonctionnait pas alors j'ai ajouté La SCRO à l'arrière-plan et il a travaillé pour moi
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 à l'api avec votre url localhost, cela fonctionne pour moi ..
- n'oubliez jamais votre colonne params dans l'en-tête: comme params: new HttpParams ().set('program_id', cette.program_id)
un POST avec httpClient dans Angular 6 faisait aussi une requête D'OPTIONS:
En-Têtes Général:
Request URL:https://hp-probook/perl-bin/muziek.pl/=/postData Request Method:OPTIONS Status Code:200 OK Remote Address:127.0.0.1:443 Referrer Policy:no-referrer-when-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 demande:
Accept:*/* Accept-Encoding:gzip, deflate, br Accept-Language:nl-NL,nl;q=0.8,en-US;q=0.6,en;q=0.4 Access-Control-Request-Headers:content-type Access-Control-Request-Method:POST Connection:keep-alive Host:hp-probook Origin: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-Methods" => 'GET,POST,PATCH,DELETE,PUT,OPTIONS', -"Access-Control-Allow-Headers" => 'Origin, Content-Type, X-Auth-Token, content-type',
avec cette configuration, L'EEG and POST a fonctionné pour moi!